@openglobus/og 0.17.2 → 0.18.1

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

@@ -0,0 +1,363 @@
+import { ButtonGroup } from "../../ui/ButtonGroup";
+import { View } from '../../ui/View';
+import { ToggleButton } from "../../ui/ToggleButton";
+import { TimelineModel } from './TimelineModel';
+import { addSeconds, createCanvasHTML, dateToStr, drawNotch, drawText, getNearestTimeLeft, getScale } from './timelineUtils';
+const SECONDS_TO_MILLISECONDS = 1000.0;
+const MILLISECONDS_TO_SECONDS = 1.0 / SECONDS_TO_MILLISECONDS;
+const TIMELINEVIEW_EVENTS = [
+    'startdrag',
+    'stopdrag',
+    'startdragcurrent',
+    'stopdragcurrent',
+    'setcurrent',
+    'reset',
+    'play',
+    'playback',
+    'pause',
+    'visibility'
+];
+const ICON_PLAY_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" style="fill: black;"/></svg>';
+const ICON_PAUSE_SVG = '<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC \'-//W3C//DTD SVG 1.1//EN\'  \'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\'><svg enable-background="new 0 0 512 512" height="512px" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_6"><rect fill="#252525" height="320" width="60" x="153" y="96"/><rect fill="#252525" height="320" width="60" x="299" y="96"/></g></svg>';
+const SCALE_FILL_COLOR = "rgba(64, 59, 59, 1.0)";
+const SCALE_NOTCH_COLOR = "#bfbfbf";
+const SCALE_TIME_COLOR = "#bfbfbf";
+const TEMPLATE = `<div class="og-timeline">
+
+  <div class="og-timeline-top">
+  </div>
+
+  <div class="og-timeline-frame">
+    <div class="og-timeline-current">
+      <div class="og-timeline-current-spin">
+        <div class="og-timeline-current-arrow"></div>
+      </div>
+    </div>
+    <div class="og-timeline-scale"></div>
+  </div>
+
+  <div class="og-timeline-bottom">
+    <div class="og-timeline-controls">
+    </div>
+  </div>
+
+</div>`;
+class TimelineView extends View {
+    constructor(options = {}) {
+        super({
+            template: TEMPLATE,
+            model: new TimelineModel({
+                rangeStart: options.rangeStart,
+                rangeEnd: options.rangeEnd,
+                current: options.currentDate,
+                minDate: options.minDate,
+                maxDate: options.maxDate
+            })
+        });
+        this._onMouseWheel = (e) => {
+            if (this._isMouseOver) {
+                let rect = this._canvasEl.getBoundingClientRect();
+                let pointerPosX = e.clientX - rect.left, pointerCenterOffsetX = -(pointerPosX - this.clientWidth * 0.5);
+                let pointerTime = this.model.rangeStartTime + this._millisecondsInPixel * pointerPosX;
+                this._zoom(pointerTime, pointerCenterOffsetX, Math.sign(e.wheelDelta));
+            }
+            else if (this._isCurrentMouseOver) {
+                let pointerCenterOffsetX = -((this.model.currentTime - this.model.rangeStartTime) / this._millisecondsInPixel - this.clientWidth * 0.5);
+                this._zoom(this.model.currentTime, pointerCenterOffsetX, Math.sign(e.wheelDelta));
+            }
+        };
+        this._onMouseWheelFF = (e) => {
+            this._onMouseWheel(e);
+        };
+        this._onMouseDown = (e) => {
+            if (this._isMouseOver) {
+                this._isDragging = true;
+                document.body.classList.add("og-timeline-unselectable");
+                this._clickPosX = e.clientX;
+                this._clickTime = Date.now();
+                this._clickRangeStart = this.model.rangeStart;
+                this._clickRangeEnd = this.model.rangeEnd;
+                this.events.dispatch(this.events.startdrag, e);
+            }
+            else if (this._isCurrentMouseOver) {
+                this._isCurrentDragging = true;
+                document.body.classList.add("og-timeline-unselectable");
+                this._clickPosX = e.clientX;
+                this._clickCurrentDate = this.model.current;
+                this.events.dispatch(this.events.startdragcurrent, e);
+            }
+        };
+        this._onMouseUp = (e) => {
+            if (this._isDragging) {
+                this._isDragging = false;
+                document.body.classList.remove("og-timeline-unselectable");
+                if (this._clickPosX === e.clientX && (Date.now() - this._clickTime) < this._clickDelay) {
+                    let rect = this._canvasEl.getBoundingClientRect();
+                    let current = new Date(this.model.rangeStartTime + (e.clientX - rect.left) * this._millisecondsInPixel);
+                    this.model.current = current;
+                    this.events.dispatch(this.events.stopdrag, current);
+                    this.events.dispatch(this.events.setcurrent, current);
+                }
+                else {
+                    this.events.dispatch(this.events.stopdrag, this.model.current);
+                }
+            }
+            else if (this._isCurrentDragging) {
+                this._isCurrentDragging = false;
+                document.body.classList.remove("og-timeline-unselectable");
+                this.events.dispatch(this.events.stopdragcurrent, this.model.current);
+            }
+        };
+        this._onMouseEnter = () => {
+            this._isMouseOver = true;
+        };
+        this._onMouseOut = () => {
+            this._isMouseOver = false;
+        };
+        this._onCurrentMouseEnter = () => {
+            this._isCurrentMouseOver = true;
+        };
+        this._onCurrentMouseOut = () => {
+            this._isCurrentMouseOver = false;
+        };
+        this._onMouseMove = (e) => {
+            if (this._isDragging) {
+                let offsetSec = (this._clickPosX - e.clientX) * this._millisecondsInPixel * MILLISECONDS_TO_SECONDS;
+                this.model.set(addSeconds(this._clickRangeStart, offsetSec), addSeconds(this._clickRangeEnd, offsetSec));
+            }
+            else if (this._isCurrentDragging) {
+                let offsetSec = (this._clickPosX - e.clientX) * this._millisecondsInPixel * MILLISECONDS_TO_SECONDS;
+                let newCurrent = addSeconds(this._clickCurrentDate, -offsetSec);
+                if (newCurrent >= this.model.rangeStart && newCurrent <= this.model.rangeEnd) {
+                    this.model.current = addSeconds(this._clickCurrentDate, -offsetSec);
+                }
+            }
+        };
+        //@ts-ignore
+        this.events = this.events.registerNames(TIMELINEVIEW_EVENTS);
+        this.fillStyle = options.fillStyle || SCALE_FILL_COLOR;
+        this.$controls = null;
+        this._frameEl = null;
+        this._currentEl = null;
+        this._canvasEl = createCanvasHTML();
+        this._ctx = this._canvasEl.getContext('2d');
+        this._isMouseOver = false;
+        this._isDragging = false;
+        this._isCurrentDragging = false;
+        this._isCurrentMouseOver = false;
+        this._minWidth = 330;
+        this._canvasScale = 2;
+        this._millisecondsInPixel = 0;
+        this._clickPosX = 0;
+        this._clickRangeStart = new Date();
+        this._clickRangeEnd = new Date();
+        this._clickCurrentDate = new Date();
+        this._clickTime = 0;
+        this._clickDelay = 450;
+        this._onResizeObserver_ = this._onResizeObserver.bind(this);
+        this._resizeObserver = new ResizeObserver(this._onResizeObserver_);
+        this._pauseBtn = new ToggleButton({
+            classList: ["og-timeline-control_button"],
+            icon: ICON_PAUSE_SVG,
+            name: "pause"
+        });
+        this._playBtn = new ToggleButton({
+            classList: ["og-timeline-control_button"],
+            icon: ICON_PLAY_SVG,
+            name: "play"
+        });
+        this._buttons = new ButtonGroup({
+            buttons: [this._pauseBtn, this._playBtn]
+        });
+        this._visibility = false;
+    }
+    _onResizeObserver() {
+        this.resize();
+    }
+    get canvasScale() {
+        return this._canvasScale;
+    }
+    set canvasScale(scale) {
+        if (scale !== this._canvasScale) {
+            this._canvasScale = scale;
+            this.resize();
+        }
+    }
+    resize() {
+        this._resize();
+        this.draw();
+    }
+    afterRender(parentNode) {
+        this.resize();
+    }
+    render() {
+        super.render();
+        this.$controls = this.select(".og-timeline-controls");
+        this._frameEl = this.select(".og-timeline-frame");
+        this._currentEl = this.select(".og-timeline-current");
+        this.select(".og-timeline-frame .og-timeline-scale").appendChild(this._canvasEl);
+        this._resizeObserver.observe(this.el);
+        this.model.events.on("change", () => {
+            this.draw();
+        });
+        this.model.events.on("current", (d) => {
+            this._drawCurrent();
+            this.events.dispatch(this.events.setcurrent, d);
+        });
+        this._canvasEl.addEventListener("mouseenter", this._onMouseEnter);
+        this._canvasEl.addEventListener("mouseout", this._onMouseOut);
+        this._currentEl.addEventListener("mouseenter", this._onCurrentMouseEnter);
+        this._currentEl.addEventListener("mouseout", this._onCurrentMouseOut);
+        document.body.addEventListener("mousemove", this._onMouseMove);
+        document.body.addEventListener("mousedown", this._onMouseDown);
+        document.body.addEventListener("mouseup", this._onMouseUp);
+        document.body.addEventListener("wheel", this._onMouseWheelFF);
+        this._playBtn.appendTo(this.$controls);
+        this._pauseBtn.appendTo(this.$controls);
+        if (this.model.stopped()) {
+            this._pauseBtn.setActive(true, true);
+            this._pauseBtn.preventClick = true;
+        }
+        else {
+            this._playBtn.setActive(true, true);
+            this._playBtn.preventClick = true;
+        }
+        this._buttons.events.on("change", (btn) => {
+            switch (btn.name) {
+                case "play":
+                    this.play();
+                    break;
+                case "pause":
+                    this.pause();
+                    break;
+            }
+        });
+        // let mltView = new View({
+        //     template: `<div class="og-timeline-multiplier">
+        //                 <select>
+        //                     <option value="0.25">0.25</option>
+        //                     <option value="0.5">0.5</option>
+        //                     <option value="1" selected>1.0</option>
+        //                     <option value="2">2.0</option>
+        //                     <option value="3">3.0</option>
+        //                     <option value="5">5.0</option>
+        //                 </select>
+        //                 </div>`
+        // });
+        //mltView.appendTo($ctl)
+        // let multiplierEl = this.select(".og-timeline-multiplier select");
+        //
+        // multiplierEl.value = this.model.multiplier.toString();
+        // multiplierEl.addEventListener("change", (e) => {
+        //     this.model.multiplier = Math.sign(this.model.multiplier) * Number(e.target.value);
+        // });
+        this.setVisibility(true);
+        return this;
+    }
+    setVisibility(visibility) {
+        if (visibility !== this._visibility) {
+            this._visibility = visibility;
+            if (this.el) {
+                if (visibility) {
+                    this.el.style.display = "block";
+                }
+                else {
+                    this.el.style.display = "none";
+                }
+            }
+            this.events.dispatch(this.events.visibility, visibility);
+        }
+    }
+    reset() {
+        this.model.stop();
+        this.events.dispatch(this.events.reset, this.model);
+    }
+    play() {
+        this.model.multiplier = Math.abs(this.model.multiplier);
+        this.model.play();
+        this.events.dispatch(this.events.play, this.model);
+    }
+    pause() {
+        this.model.stop();
+        this.events.dispatch(this.events.pause, this.model);
+    }
+    playBack() {
+        this.model.multiplier = -1 * Math.abs(this.model.multiplier);
+        this.model.play();
+        this.events.dispatch(this.events.playback, this.model);
+    }
+    _zoom(pointerTime, pointerCenterOffsetX, dir) {
+        let centerTime = this.model.rangeStartTime + 0.5 * this.model.range;
+        let centerTimeOffset = (pointerTime - centerTime) * MILLISECONDS_TO_SECONDS;
+        let rangeStart = addSeconds(this.model.rangeStart, centerTimeOffset), rangeEnd = addSeconds(this.model.rangeEnd, centerTimeOffset);
+        let delta = ((rangeEnd.getTime() - rangeStart.getTime()) / 20) * MILLISECONDS_TO_SECONDS;
+        let newRangeStart = addSeconds(rangeStart, delta * dir);
+        let newRangeEnd = addSeconds(rangeEnd, -delta * dir);
+        let msPx = (newRangeEnd.getTime() - newRangeStart.getTime()) / this.clientWidth;
+        if (msPx < 31536000000 && msPx > 0.1) {
+            let timeOffset = msPx * pointerCenterOffsetX * MILLISECONDS_TO_SECONDS;
+            this.model.set(addSeconds(newRangeStart, timeOffset), addSeconds(newRangeEnd, timeOffset));
+        }
+    }
+    get clientWidth() {
+        return this._canvasEl ? this._canvasEl.width / this._canvasScale : 0;
+    }
+    get clientHeight() {
+        return this._canvasEl ? this._canvasEl.height / this._canvasScale : 0;
+    }
+    _resize() {
+        if (this._frameEl) {
+            this._canvasEl.width = this._frameEl.clientWidth * this._canvasScale;
+            this._canvasEl.height = this._frameEl.clientHeight * this._canvasScale;
+            this._canvasEl.style.width = `${this._frameEl.clientWidth}px`;
+            this._canvasEl.style.height = `${this._frameEl.clientHeight}px`;
+        }
+    }
+    getOffsetByTime(milliseconds) {
+        return (milliseconds - this.model.rangeStartTime) / this._millisecondsInPixel;
+    }
+    remove() {
+        super.remove();
+        this.model.stop();
+    }
+    _clearCanvas() {
+        this._ctx.fillStyle = this.fillStyle;
+        this._ctx.fillRect(0, 0, this.clientWidth * this._canvasScale, this.clientHeight * this._canvasScale);
+    }
+    _drawCurrent() {
+        let curPosX = (this.model.currentTime - this.model.rangeStartTime) / this._millisecondsInPixel;
+        if (this.model.current < this.model.rangeStart || this.model.current > this.model.rangeEnd) {
+            this._currentEl.style.display = "none";
+        }
+        else {
+            this._currentEl.style.display = "block";
+            this._currentEl.style.transform = `translateX(${curPosX}px)`;
+        }
+    }
+    draw() {
+        this._millisecondsInPixel = (this.model.range / this.clientWidth);
+        let minWidthMs = this._minWidth * this._millisecondsInPixel;
+        let scaleData = getScale(minWidthMs * MILLISECONDS_TO_SECONDS);
+        if (scaleData) {
+            this._clearCanvas();
+            let scaleMs = scaleData[0] * SECONDS_TO_MILLISECONDS, scalePx = scaleMs / this._millisecondsInPixel, segCount = scaleData[1];
+            let originTime = getNearestTimeLeft(this.model.rangeStartTime, scaleMs);
+            let showMilliseconds = scaleData[0] < 1.0, showTime = scaleData[0] < 86400.0;
+            for (let i = originTime, rangeEnd = this.model.rangeEndTime + scaleMs; i < rangeEnd; i += scaleMs) {
+                let x = this.getOffsetByTime(i);
+                if (x >= 0 && x <= this.clientWidth * this._canvasScale) {
+                    drawNotch(this._ctx, x * this._canvasScale, 10 * this._canvasScale, 2 * this._canvasScale, SCALE_NOTCH_COLOR);
+                }
+                for (let j = 1; j < segCount; j++) {
+                    let xx = x + j * (scalePx / segCount);
+                    if (xx >= 0 && xx <= this.clientWidth * this._canvasScale) {
+                        drawNotch(this._ctx, xx * this._canvasScale, 5 * this._canvasScale, 1 * this._canvasScale, SCALE_NOTCH_COLOR);
+                    }
+                }
+                drawText(this._ctx, dateToStr(new Date(i), showTime, showMilliseconds), x * this._canvasScale, 26 * this._canvasScale, "24px monospace", SCALE_TIME_COLOR, "center");
+            }
+            this._drawCurrent();
+        }
+    }
+}
+export { TimelineView };

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

@@ -0,0 +1,12 @@
+type BaselineType = "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
+type AlignType = "center" | "end" | "left" | "right" | "start";
+export declare function addSeconds(date: Date, seconds: number): Date;
+export declare function dateToStr(date: Date, showTime?: boolean, showMilliseconds?: boolean): string;
+export declare function createCanvasHTML(): HTMLCanvasElement;
+export declare function getNearestTimeLeft(t: number, div: number): number;
+export declare function drawNotch(ctx: CanvasRenderingContext2D, xOffset?: number, size?: number, thickness?: number, color?: string): void;
+export declare function drawText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, font?: string, fillStyle?: string, align?: AlignType, baseLine?: BaselineType, rotDeg?: number): void;
+export declare const SCALES: [number, number][];
+export declare function getScale(seconds: number): [number, number] | undefined;
+export declare const MONTHS: string[];
+export {};

package/lib/js/control/timeline/timelineUtils.js

@@ -0,0 +1,112 @@
+import * as math from '../../math';
+export function addSeconds(date, seconds) {
+    return new Date(+date + seconds * 1000);
+}
+export function dateToStr(date, showTime = true, showMilliseconds = false) {
+    let month = MONTHS[date.getMonth()], day = date.getUTCDate(), year = date.getUTCFullYear();
+    if (showTime) {
+        let h = date.getUTCHours().toString().padStart(2, '0'), m = date.getUTCMinutes().toString().padStart(2, '0'), s = date.getUTCSeconds().toString().padStart(2, '0');
+        if (showMilliseconds) {
+            let ms = date.getUTCMilliseconds().toString().padStart(3, '0');
+            return `${month} ${day} ${year} ${h}:${m}:${s}.${ms}`;
+        }
+        return `${month} ${day} ${year} ${h}:${m}:${s}`;
+    }
+    return `${month} ${day} ${year}`;
+}
+export function createCanvasHTML() {
+    return document.createElement("canvas");
+}
+export function getNearestTimeLeft(t, div) {
+    return t - (t % div);
+}
+export function drawNotch(ctx, xOffset = 0, size = 10, thickness = 2, color = "white") {
+    ctx.lineWidth = thickness;
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(xOffset, 0);
+    ctx.lineTo(xOffset, size);
+    ctx.stroke();
+}
+export function drawText(ctx, text, x, y, font = "12px Arial", fillStyle = "black", align = "left", baseLine = "bottom", rotDeg = 0) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(rotDeg * math.RADIANS);
+    ctx.fillStyle = fillStyle;
+    ctx.textBaseline = baseLine;
+    ctx.font = font;
+    ctx.textAlign = align;
+    ctx.fillText(text, 0, 0);
+    ctx.restore();
+}
+export const SCALES = [
+    [0.001, 10],
+    [0.002, 10],
+    [0.005, 10],
+    [0.01, 10],
+    [0.02, 10],
+    [0.05, 10],
+    [0.1, 10],
+    [0.25, 10],
+    [0.5, 5],
+    [1.0, 10],
+    [2.0, 10],
+    [5.0, 5],
+    [10.0, 10],
+    [15.0, 15],
+    [30.0, 6],
+    [60.0, 12],
+    [120.0, 12],
+    [300.0, 5],
+    [600.0, 10],
+    [900.0, 15],
+    [1800.0, 6],
+    [3600.0, 12],
+    [7200.0, 10],
+    [14400.0, 4],
+    [21600.0, 6],
+    [43200.0, 12],
+    [86400.0, 24],
+    [172800.0, 2],
+    [345600.0, 4],
+    [604800.0, 7],
+    [1296000.0, 15],
+    [2592000.0, 5],
+    [5184000.0, 6],
+    [7776000.0, 9],
+    [15552000.0, 18],
+    [31536000.0, 12],
+    [63072000.0, 2],
+    [126144000.0, 4],
+    [157680000.0, 5],
+    [315360000.0, 10],
+    [630720000.0, 2],
+    [1261440000.0, 4],
+    [1576800000.0, 5],
+    [3153600000.0, 10],
+    [6307200000.0, 2],
+    [12614400000.0, 4],
+    [15768000000.0, 5],
+    [31536000000.0, 10], // 1000years
+];
+export function getScale(seconds) {
+    for (let i = 0, len = SCALES.length; i < len; i++) {
+        if (SCALES[i][0] > seconds) {
+            return SCALES[i - 1];
+        }
+    }
+}
+export const MONTHS = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+];