@openglobus/og 0.24.2 → 0.25.0

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

@@ -1,363 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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], // 1min
-    [120.0, 12], // 2min
-    [300.0, 5], // 5min
-    [600.0, 10], // 10min
-    [900.0, 15], // 15min
-    [1800.0, 6], // 30min
-    [3600.0, 12], // 1hr
-    [7200.0, 10], // 2hr
-    [14400.0, 4], // 4hr
-    [21600.0, 6], // 6hr
-    [43200.0, 12], // 12hr
-    [86400.0, 24], // 24hr
-    [172800.0, 2], // 2days
-    [345600.0, 4], // 4days
-    [604800.0, 7], // 7days
-    [1296000.0, 15], // 15days
-    [2592000.0, 5], // 30days
-    [5184000.0, 6], // 60days
-    [7776000.0, 9], // 90days
-    [15552000.0, 18], // 180days
-    [31536000.0, 12], // 365days
-    [63072000.0, 2], // 2years
-    [126144000.0, 4], // 4years
-    [157680000.0, 5], // 5years
-    [315360000.0, 10], // 10years
-    [630720000.0, 2], // 20years
-    [1261440000.0, 4], // 40years
-    [1576800000.0, 5], // 50years
-    [3153600000.0, 10], // 100years
-    [6307200000.0, 2], // 200years
-    [12614400000.0, 4], // 400years
-    [15768000000.0, 5], // 500years
-    [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",
-];