@openglobus/og 0.18.0 → 0.18.1

package/{src/control/timeline/TimelineModel.ts → lib/js/control/timeline/TimelineModel.js}

@@ -1,92 +1,52 @@
-import {EventsHandler, createEvents} from '../../Events';
-import {addSeconds} from "./timelineUtils";
-
-type TimelineEventsList = ["change", "current"];
-
-const TIMELINE_EVENTS: TimelineEventsList = ["change", "current"/*, "tick"*/];
-
-interface ITimelineParams {
-    current?: Date;
-    rangeStart?: Date;
-    rangeEnd?: Date;
-    minDate?: Date | null;
-    maxDate?: Date | null;
-    multiplier?: number
-}
-
+import { createEvents } from '../../Events';
+import { addSeconds } from "./timelineUtils";
+const TIMELINE_EVENTS = ["change", "current" /*, "tick"*/];
 class TimelineModel {
-    public events: EventsHandler<TimelineEventsList>;
-    protected _current: Date;
-    protected _rangeStart: Date;
-    protected _rangeEnd: Date;
-    protected _range: number;
-    protected _minDate: Date | null;
-    protected _maxDate: Date | null;
-    protected _requestAnimationFrameId: number;
-    protected _prevNow: number;
-
-    public multiplier: number;
-    public dt: number;
-
-    constructor(options: ITimelineParams = {}) {
-
+    constructor(options = {}) {
         this.events = createEvents(TIMELINE_EVENTS);
-
         this._current = options.current || new Date();
         this._rangeStart = options.rangeStart || new Date();
         this._rangeEnd = options.rangeEnd || addSeconds(this._rangeStart, 3600);
         this._range = this._rangeEnd.getTime() - this._rangeStart.getTime();
         this._minDate = options.minDate || null;
         this._maxDate = options.maxDate || null;
-
         this.multiplier = options.multiplier != undefined ? options.multiplier : 1.0;
-
         this._requestAnimationFrameId = 0;
         this._prevNow = 0;
-
         this.dt = 0;
     }
-
-    public play() {
+    play() {
         if (!this._requestAnimationFrameId) {
             this._prevNow = window.performance.now();
             this._animationFrameCallback();
         }
     }
-
-    public stop() {
+    stop() {
         if (this._requestAnimationFrameId) {
             window.cancelAnimationFrame(this._requestAnimationFrameId);
             this._requestAnimationFrameId = 0;
         }
     }
-
-    public stopped() {
+    stopped() {
         return this._requestAnimationFrameId == 0;
     }
-
-    protected _animationFrameCallback() {
+    _animationFrameCallback() {
         this._requestAnimationFrameId = window.requestAnimationFrame(() => {
             this._frame();
             this._animationFrameCallback();
         });
     }
-
-    protected _frame() {
+    _frame() {
         let now = window.performance.now();
         this.dt = now - this._prevNow;
         this._prevNow = now;
-
         this.current = new Date(this.currentTime + this.dt * this.multiplier);
-
         // this._events.dispatch(this._events.tick, this._current);
     }
-
-    public get range(): number {
-        return this._range
+    get range() {
+        return this._range;
     }
-
-    public set(rangeStart: Date, rangeEnd: Date) {
+    set(rangeStart, rangeEnd) {
         if (rangeStart !== this._rangeStart || rangeEnd !== this._rangeEnd) {
             this._rangeStart = rangeStart;
             this._rangeEnd = rangeEnd;
@@ -94,53 +54,46 @@ class TimelineModel {
             this.events.dispatch(this.events.change, rangeStart, rangeEnd);
         }
     }
-
-    public get current(): Date {
+    get current() {
         return this._current;
     }
-
-    public get rangeStart(): Date {
+    get rangeStart() {
         return this._rangeStart;
     }
-
-    public get rangeEnd(): Date {
+    get rangeEnd() {
         return this._rangeEnd;
     }
-
-    public get rangeStartTime(): number {
+    get rangeStartTime() {
         return this._rangeStart.getTime();
     }
-
-    public get rangeEndTime(): number {
+    get rangeEndTime() {
         return this._rangeEnd.getTime();
     }
-
-    public get currentTime(): number {
+    get currentTime() {
         return this._current.getTime();
     }
-
-    public set current(current: Date) {
+    set current(current) {
         if (current !== this._current) {
             if (this._maxDate && current > this._maxDate) {
                 this._current = this._maxDate;
-            } else if (this._minDate && current < this._minDate) {
+            }
+            else if (this._minDate && current < this._minDate) {
                 this._current = this._minDate;
-            } else {
+            }
+            else {
                 this._current = current;
             }
             this.events.dispatch(this.events.current, this._current);
         }
     }
-
-    public set rangeStart(date: Date) {
+    set rangeStart(date) {
         if (date !== this._rangeStart) {
             this._rangeStart = date;
             this._range = this._rangeEnd.getTime() - this._rangeStart.getTime();
             this.events.dispatch(this.events.change, date);
         }
     }
-
-    public set rangeEnd(date: Date) {
+    set rangeEnd(date) {
         if (date !== this._rangeEnd) {
             this._rangeEnd = date;
             this._range = this._rangeEnd.getTime() - this._rangeStart.getTime();
@@ -148,5 +101,4 @@ class TimelineModel {
         }
     }
 }
-
-export {TimelineModel};
+export { TimelineModel };

package/lib/js/control/timeline/TimelineView.d.ts

@@ -0,0 +1,85 @@
+import { EventsHandler } from "../../Events";
+import { ButtonGroup } from "../../ui/ButtonGroup";
+import { IViewParams, View, ViewEventsList } from '../../ui/View';
+import { ToggleButton } from "../../ui/ToggleButton";
+import { TimelineModel } from './TimelineModel';
+import { MouseEventExt } from "../../input/MouseHandler";
+interface ITimelineViewParams extends IViewParams {
+    currentDate?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    fillStyle?: string;
+}
+type TimelineViewEventsList = [
+    'startdrag',
+    'stopdrag',
+    'startdragcurrent',
+    'stopdragcurrent',
+    'setcurrent',
+    'reset',
+    'play',
+    'playback',
+    'pause',
+    'visibility'
+];
+declare class TimelineView extends View<TimelineModel> {
+    events: EventsHandler<TimelineViewEventsList> & EventsHandler<ViewEventsList>;
+    fillStyle: string;
+    $controls: HTMLElement | null;
+    protected _frameEl: HTMLElement | null;
+    protected _currentEl: HTMLElement | null;
+    protected _canvasEl: HTMLCanvasElement;
+    protected _ctx: CanvasRenderingContext2D;
+    protected _isMouseOver: boolean;
+    protected _isDragging: boolean;
+    protected _isCurrentDragging: boolean;
+    protected _isCurrentMouseOver: boolean;
+    protected _minWidth: number;
+    protected _canvasScale: number;
+    protected _millisecondsInPixel: number;
+    protected _clickPosX: number;
+    protected _clickRangeStart: Date;
+    protected _clickRangeEnd: Date;
+    protected _clickCurrentDate: Date;
+    protected _clickTime: number;
+    protected _clickDelay: number;
+    protected _onResizeObserver_: () => void;
+    protected _resizeObserver: ResizeObserver;
+    protected _pauseBtn: ToggleButton;
+    protected _playBtn: ToggleButton;
+    protected _buttons: ButtonGroup;
+    protected _visibility: boolean;
+    constructor(options?: ITimelineViewParams);
+    protected _onResizeObserver(): void;
+    get canvasScale(): number;
+    set canvasScale(scale: number);
+    resize(): void;
+    afterRender(parentNode: HTMLElement): void;
+    render(): this;
+    setVisibility(visibility: boolean): void;
+    reset(): void;
+    play(): void;
+    pause(): void;
+    playBack(): void;
+    protected _onMouseWheel: (e: MouseEventExt) => void;
+    protected _onMouseWheelFF: (e: MouseEventExt) => void;
+    protected _zoom(pointerTime: number, pointerCenterOffsetX: number, dir: number): void;
+    protected _onMouseDown: (e: MouseEvent) => void;
+    protected _onMouseUp: (e: MouseEvent) => void;
+    protected _onMouseEnter: () => void;
+    protected _onMouseOut: () => void;
+    protected _onCurrentMouseEnter: () => void;
+    protected _onCurrentMouseOut: () => void;
+    protected _onMouseMove: (e: MouseEvent) => void;
+    get clientWidth(): number;
+    get clientHeight(): number;
+    protected _resize(): void;
+    getOffsetByTime(milliseconds: number): number;
+    remove(): void;
+    protected _clearCanvas(): void;
+    protected _drawCurrent(): void;
+    draw(): void;
+}
+export { TimelineView };