@openglobus/og 0.17.2 → 0.18.1

package/src/og/control/timeline/TimelineView.js

@@ -1,462 +0,0 @@
-'use strict';
-
-import { ButtonGroup } from "../../ui/ButtonGroup.js";
-import { ToggleButton } from "../../ui/ToggleButton.js";
-import { View } from '../../ui/View.js';
-import { TimelineModel } from './TimelineModel.js';
-import {
-    addSeconds,
-    createCanvasHTML,
-    dateToStr,
-    drawNotch,
-    drawText,
-    getNearestTimeLeft,
-    getScale
-} from './timelineUtils.js';
-
-const SECONDS_TO_MILLISECONDS = 1000.0;
-const MILLISECONDS_TO_SECONDS = 1.0 / SECONDS_TO_MILLISECONDS;
-const EVENT_LIST = [
-    '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,
-            eventList: EVENT_LIST,
-            model: new TimelineModel({
-                rangeStart: options.rangeStart,
-                rangeEnd: options.rangeEnd,
-                current: options.currentDate,
-                minDate: options.minDate,
-                maxDate: options.maxDate
-            })
-        });
-
-        this.fillStyle = options.fillStyle || SCALE_FILL_COLOR;
-
-        this.$controls;
-
-        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 = null;
-    }
-
-    _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.on("change", () => {
-            this.draw()
-        });
-
-        this.model.on("current", (d) => {
-            this._drawCurrent();
-            this._events.dispatch(this._events.setcurrent, d);
-        });
-
-        this._canvasEl.addEventListener("mouseenter", this._onMouseEnter.bind(this));
-        this._canvasEl.addEventListener("mouseout", this._onMouseOut.bind(this));
-
-        this._currentEl.addEventListener("mouseenter", this._onCurrentMouseEnter.bind(this));
-        this._currentEl.addEventListener("mouseout", this._onCurrentMouseOut.bind(this));
-
-        document.body.addEventListener("mousemove", this._onMouseMove.bind(this));
-        document.body.addEventListener("mousedown", this._onMouseDown.bind(this));
-        document.body.addEventListener("mouseup", this._onMouseUp.bind(this));
-        document.body.addEventListener("mousewheel", this._onMouseWheel.bind(this));
-        document.body.addEventListener("wheel", this._onMouseWheelFF.bind(this));
-
-        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.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 (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);
-    }
-
-    _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));
-        }
-    }
-
-    _onMouseWheelFF(e) {
-        this._onMouseWheel(e);
-    }
-
-    _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)
-            );
-        }
-    }
-
-    _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);
-        }
-    }
-
-    _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);
-        }
-    }
-
-    _onMouseEnter() {
-        this._isMouseOver = true;
-    }
-
-    _onMouseOut() {
-        this._isMouseOver = false;
-    }
-
-    _onCurrentMouseEnter() {
-        this._isCurrentMouseOver = true;
-    }
-
-    _onCurrentMouseOut() {
-        this._isCurrentMouseOver = false;
-    }
-
-    _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);
-            }
-        }
-    }
-
-    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._canvasEl && 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() {
-        if (this._ctx) {
-            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() {
-        if (this._ctx) {
-            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 showMillisconds = 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, showMillisconds), x * this._canvasScale, 26 * this._canvasScale, "24px monospace", SCALE_TIME_COLOR, "center");
-                }
-
-                this._drawCurrent();
-            }
-        }
-    }
-}
-
-export { TimelineView };
-

package/src/og/control/timeline/timelineUtils.js

@@ -1,132 +0,0 @@
-'use strict';
-
-import * as math from '../../math.js';
-
-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) {
-    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",
-];