@openglobus/og 0.14.10 → 0.15.0

package/src/og/control/selection/SelectionScene.js

@@ -0,0 +1,350 @@
+'use strict';
+
+import * as math from '../../math.js';
+import { RenderNode } from '../../scene/RenderNode.js';
+import { Events } from '../../Events.js';
+import { LonLat } from '../../LonLat.js';
+import { Vec3 } from '../../math/Vec3.js';
+import { Vec2 } from '../../math/Vec2.js';
+import { Vector } from '../../layer/Vector.js';
+import { Entity } from '../../entity/Entity.js';
+import { Ellipsoid } from '../../ellipsoid/Ellipsoid.js';
+import { Object3d } from '../../Object3d.js';
+
+const OUTLINE_COUNT = 120;
+
+const MAX_SCALE = 0.005;
+const MIN_SCALE = 0.001;
+const MAX_SCALE_HEIGHT = 3000.0;
+const MIN_SCALE_HEIGHT = 19000000.0;
+
+function distanceFormat(v) {
+    if (v > 1000) {
+        return `${(v / 1000).toFixed(1)} km`;
+    } else if (v > 9) {
+        return `${Math.round(v)} m`;
+    } else {
+        return `${v.toFixed(1)} m`;
+    }
+}
+
+class SelectionScene extends RenderNode {
+    constructor(options = {}) {
+        super(options.name);
+
+        this.events = new Events(EVENT_NAMES);
+
+        this._ignoreTerrain = options.ignoreTerrain != undefined ? options.ignoreTerrain : true;
+
+        this._onSelect = options.onSelect || null;
+
+        this._autoSelectionHide = options.autoSelectionHide || false;
+
+        this._planet = options.planet || null;
+
+        this._startLonLat = null;
+
+        this._heading = 0;
+
+        this._propsLabel = new Entity({
+            'name': 'propsLabel',
+            'label': {
+                text: "",
+                size: 11,
+                color: "rgba(455,455,455,1.0)",
+                outlineColor: "rgba(0,0,0,0.34)",
+                outline: 0.23,
+                align: "center",
+                offset: [0, 18]
+            }
+        });
+
+        this._propsLabel.label.setVisibility(false);
+
+        this._trackEntity = new Entity({
+            polyline: {
+                path3v: [],
+                thickness: 3.8,
+                color: "rgb(455,455,455)",
+                isClosed: false
+            }
+        });
+
+        this._trackEntity.polyline.altitude = 0.01;
+
+        let obj3d = Object3d.createCylinder(1.1, 0, 2.7, 20, 1, true, false, 0, 0, 0)
+
+        this._cornerEntity = [
+            new Entity({
+                geoObject: {
+                    scale: 1,
+                    instanced: true,
+                    tag: "selection",
+                    color: "rgb(0,305,0)",
+                    object3d: obj3d
+                },
+                properties: {
+                    name: "start"
+                }
+            }),
+            new Entity({
+                geoObject: {
+                    scale: 1,
+                    instanced: true,
+                    tag: "selection",
+                    color: "rgb(455,0,0)",
+                    object3d: obj3d
+                },
+                properties: {
+                    name: "end"
+                }
+            })
+        ];
+
+        this._trackLayer = new Vector("track", {
+            entities: [this._trackEntity, this._propsLabel],
+            pickingEnabled: false,
+            polygonOffsetUnits: -1.0,
+            relativeToGround: true,
+            displayInLayerSwitcher: false
+        });
+
+        this._cornersLayer = new Vector("corners", {
+            entities: [this._cornerEntity[0], this._cornerEntity[1]],
+            pickingEnabled: true,
+            displayInLayerSwitcher: false,
+            scaleByDistance: [1.0, 4000000, 0.01],
+            pickingScale: 2
+        });
+    }
+
+    set ignoreTerrain(v) {
+        this._ignoreTerrain = v;
+        if (v) {
+            //...redraw line
+        }
+    }
+
+    bindPlanet(planet) {
+        this._planet = planet;
+    }
+
+    init() {
+        this._activate();
+    }
+
+    onremove() {
+        this._deactivate();
+    }
+
+    _activate() {
+        this._propsLabel.label.setVisibility(false);
+
+        this._onMouseMove_ = this._onMouseMove.bind(this);
+        this.renderer.events.on("mousemove", this._onMouseMove_, this);
+
+        this._onMouseLdown_ = this._onMouseLdown.bind(this);
+        this.renderer.events.on("ldown", this._onMouseLdown_, this);
+
+        this._onMouseLup_ = this._onMouseLup.bind(this);
+        this.renderer.events.on("lup", this._onMouseLup_, this);
+
+        this._planet.addLayer(this._trackLayer);
+
+        this._planet.addLayer(this._cornersLayer);
+
+    }
+
+    _deactivate() {
+        this._startLonLat = null;
+        this._trackLayer.remove();
+        this._cornersLayer.remove();
+        this.renderer.events.off("mousemove", this._onMouseMove_);
+        this.renderer.events.off("ldown", this._onMouseLdown_);
+        this.renderer.events.off("lup", this._onMouseLup_);
+
+        this.clear();
+
+        this._onMouseMove_ = null;
+        this._onMouseLdown_ = null;
+        this._onMouseLup_ = null;
+    }
+
+    _onMouseLdown(e) {
+
+        //workaround to show pointer, because ogGrabbingPoiner keep !importanti which override pointer style
+        e.renderer.handler.canvas.classList.remove('ogGrabbingPoiner');
+
+        e.renderer.handler.canvas.style.cursor = 'pointer';
+
+        if (!this._startLonLat) {
+
+
+            this._propsLabel.label.setVisibility(false);
+
+            this._trackEntity.polyline.setPath3v([]);
+
+
+            this._cornerEntity[0].geoObject.setVisibility(true);
+            this._cornerEntity[1].geoObject.setVisibility(true);
+
+            this.renderer.controls.mouseNavigation.deactivate();
+            this._startLonLat = this._planet.getLonLatFromPixelTerrain(e);
+
+            let startPos = this._planet.ellipsoid.lonLatToCartesian(this._startLonLat);
+            this._cornerEntity[0].setCartesian3v(startPos);
+            this._cornerEntity[1].setCartesian3v(startPos);
+        }
+    }
+
+    _onMouseLup(e) {
+        if (this._startLonLat) {
+
+            this._pickedCorner = null;
+            this._anchorLonLat = null;
+
+            this._propsLabel.label.setVisibility(true);
+
+            if (this._onSelect && typeof this._onSelect === 'function') {
+                let startLonLat = this._cornerEntity[0].getLonLat();
+                let endLonLat = this._cornerEntity[1].getLonLat();
+
+                let extent = [
+                    Math.min(startLonLat.lon, endLonLat.lon),
+                    Math.min(startLonLat.lat, endLonLat.lat),
+                    Math.max(startLonLat.lon, endLonLat.lon),
+                    Math.max(startLonLat.lat, endLonLat.lat)
+                ];
+                this._onSelect(extent);
+            }
+
+            if (this._autoSelectionHide) {
+                this.clear();
+            }
+
+            this._startLonLat = null;
+        }
+        e.renderer.handler.canvas.style.cursor = 'default';
+        this.renderer.controls.mouseNavigation.activate();
+    }
+
+    _drawLine(startLonLat, endLonLat, startPos) {
+
+        if (!startPos) {
+            startPos = this._planet.ellipsoid.lonLatToCartesian(startLonLat);
+        }
+
+        let endPos = this._planet.ellipsoid.lonLatToCartesian(endLonLat);
+
+        let length = this._planet.ellipsoid.getGreatCircleDistance(startLonLat, endLonLat);
+
+        this._heading = Ellipsoid.getRhumbBearing(startLonLat, endLonLat);
+
+        let path = [];
+
+
+        this._cornerEntity[0].setCartesian3v(startPos);
+        this._cornerEntity[1].setCartesian3v(endPos);
+
+
+        let corners = [
+            startPos,
+            this._planet.ellipsoid.lonLatToCartesian(new LonLat(endLonLat.lon, startLonLat.lat, startLonLat.height)),
+            endPos,
+            this._planet.ellipsoid.lonLatToCartesian(new LonLat(startLonLat.lon, endLonLat.lat, startLonLat.height)),
+            startPos
+        ];
+
+
+        path.push(startPos);
+
+        let createPath = (sideA, sideB) => {
+            let dir = sideB.sub(sideA);
+            let dist = dir.length();
+            dir.normalize();
+
+            for (let i = 0; i < OUTLINE_COUNT; i++) {
+                let f = dir.scaleTo(i * dist / OUTLINE_COUNT).addA(sideA);
+                path.push(f);
+            }
+        };
+
+        for (let i = 0; i < corners.length - 1; i++) {
+            createPath(corners[i], corners[i + 1]);
+        }
+
+        this._trackEntity.polyline.setPath3v([path]);
+
+        if (this._ignoreTerrain) {
+            // this._propsLabel.setCartesian3v(path[Math.floor(path.length / 2)]);
+            // this._propsLabel.label.setText(`${distanceFormat(length)}, ${Math.round(this._heading)} deg`);
+        }
+    }
+
+    _onMouseMove(e) {
+        if (this._startLonLat) {
+            this._propsLabel.label.setVisibility(true);
+            let endLonLat = this._planet.getLonLatFromPixelTerrain(e);
+            if (!endLonLat)
+                return;
+            this._drawLine(this._startLonLat, endLonLat);
+        }
+    }
+
+    clear() {
+        this._trackEntity.polyline.clear();
+        this._cornerEntity[0].geoObject.setVisibility(false);
+        this._cornerEntity[1].geoObject.setVisibility(false);
+    }
+
+    frame() {
+        let t = this._trackEntity.polyline.getPath3v()[0];
+        if (t) {
+            if (!this._ignoreTerrain) {
+                let res = 0;
+                for (let i = 0, len = t.length - 1; i < len; i++) {
+                    res += t[i + 1].distance(t[i]);
+                }
+
+                this._propsLabel.setCartesian3v(t[Math.floor(t.length / 2)]);
+                this._propsLabel.label.setText(`${distanceFormat(res)}, ${Math.round(this._heading)} deg`);
+            }
+        }
+    }
+
+    get ellipsoid() {
+        return this._planet ? this._planet.ellipsoid : null;
+    }
+}
+
+const EVENT_NAMES = [
+    "add",
+    "remove",
+    "mousemove",
+    "mouseenter",
+    "mouseleave",
+    "lclick",
+    "rclick",
+    "mclick",
+    "ldblclick",
+    "rdblclick",
+    "mdblclick",
+    "lup",
+    "rup",
+    "mup",
+    "ldown",
+    "rdown",
+    "mdown",
+    "lhold",
+    "rhold",
+    "mhold",
+    "mousewheel",
+    "touchmove",
+    "touchstart",
+    "touchend",
+    "doubletouch",
+    "touchleave",
+    "touchenter"
+];
+
+export { SelectionScene };

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

@@ -0,0 +1,99 @@
+'use strict';
+
+import { Control } from '../Control.js';
+import { TimelineView } from './TimelineView.js';
+import { Dialog } from "../../ui/Dialog.js";
+import { ToggleButton } from "../../ui/ToggleButton.js";
+import { UTCtoDate } from "../../astro/jd.js";
+
+function addHours(date, hours) {
+    const temp = new Date(date);
+    temp.setHours(temp.getHours() + hours);
+    return temp;
+}
+
+const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+    <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+    <g><path d="M500,10C229.4,10,10,229.4,10,500s219.4,490,490,490s490-219.4,490-490S770.6,10,500,10z M800.3,800.3c-39,39-84.5,69.7-135,91C613,913.5,557.4,924.7,500,924.7s-112.9-11.2-165.3-33.3c-50.5-21.3-95.9-52-135-91c-39-39-69.7-84.5-91-135C86.5,612.9,75.3,557.4,75.3,500s11.2-112.9,33.3-165.3c21.3-50.5,52-95.9,91-135c39-39,84.5-69.7,135-91C387.1,86.5,442.6,75.3,500,75.3s112.9,11.2,165.3,33.3c50.5,21.3,95.9,52,135,91c39,39,69.7,84.5,91,135c22.1,52.3,33.3,107.9,33.3,165.3s-11.2,112.9-33.3,165.3C869.9,715.8,839.3,761.2,800.3,800.3z"/><path d="M761.3,532.7H532.7V304c0-18.1-14.6-32.7-32.7-32.7s-32.7,14.6-32.7,32.7v261.3l0,0c0,18.1,14.6,32.7,32.7,32.7h261.3c18.1,0,32.7-14.6,32.7-32.7l0,0C794,547.3,779.4,532.7,761.3,532.7z"/></g>
+</svg>`;
+
+class TimelineControl extends Control {
+    constructor(options = {}) {
+        if (!options.name || options.name === "") {
+            options.name = "timeline";
+        }
+        super(options);
+
+        let currentDate = new Date();
+        let startDate = addHours(currentDate, -12), endDate = addHours(currentDate, 12);
+
+        this._timelineView = new TimelineView({
+            rangeStart: startDate,
+            rangeEnd: endDate
+        });
+
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-timeline_button"],
+            icon: ICON_BUTTON_SVG
+        });
+
+        this._dialog = new Dialog({
+            title: "Timeline",
+            visible: false,
+            resizable: true,
+            useHide: true,
+            top: 10,
+            left: 60,
+            width: 600,
+            height: 115,
+            minHeight: 115,
+            maxHeight: 110
+        });
+
+        this._dialog.on("visibility", (v) => {
+            this._toggleBtn.setActive(v);
+        });
+    }
+
+    oninit() {
+
+        let $container = this.renderer.div;
+
+        this._toggleBtn.appendTo($container);
+        this._dialog.appendTo($container);
+
+        this._toggleBtn.on("change", (isActive) => {
+            this._dialog.setVisibility(isActive);
+            if (isActive) {
+                this._timelineView.resize();
+            }
+        });
+
+        this._timelineView.appendTo(this._dialog.container);
+
+        this._timelineView.on("setcurrent", (d) => {
+            this.renderer.handler.defaultClock.setDate(d);
+        });
+
+        this._timelineView.on("startdrag", () => {
+            this.renderer.controls.mouseNavigation.deactivate();
+        });
+
+        this._timelineView.on("stopdrag", () => {
+            this.renderer.controls.mouseNavigation.activate();
+        });
+
+        this._timelineView.on("startdragcurrent", () => {
+            this.renderer.controls.mouseNavigation.deactivate();
+        });
+
+        this._timelineView.on("stopdragcurrent", () => {
+            this.renderer.controls.mouseNavigation.activate();
+        });
+    }
+}
+
+export { TimelineControl };

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

@@ -0,0 +1,133 @@
+'use strict';
+
+import { addSeconds } from "./timelineUtils.js";
+import { Events } from '../../Events.js';
+
+class TimelineModel {
+    constructor(options = {}) {
+
+        this._events = new Events(["change", "current"/*, "tick"*/]);
+
+        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;
+    }
+
+    on(eventName, callback, sender) {
+        return this._events.on(eventName, callback, sender);
+    }
+
+    off(eventName, callback) {
+        return this._events.off(eventName, callback);
+    }
+
+    play() {
+        if (!this._requestAnimationFrameId) {
+            this._prevNow = window.performance.now();
+            this._animationFrameCallback();
+        }
+    }
+
+    stop() {
+        if (this._requestAnimationFrameId) {
+            window.cancelAnimationFrame(this._requestAnimationFrameId);
+            this._requestAnimationFrameId = 0;
+        }
+    }
+
+    _animationFrameCallback() {
+        this._requestAnimationFrameId = window.requestAnimationFrame(() => {
+            this._frame();
+            this._animationFrameCallback();
+        });
+    }
+
+    _frame() {
+        let now = window.performance.now();
+        this.dt = now - this._prevNow;
+        this._prevNow = now;
+
+        this.current = new Date(this.currentTime + this.dt * this.multiplier);
+
+        // // @ts-ignore
+        // this._events.dispatch(this._events.tick, this._current);
+    }
+
+    get range() {
+        return this._range
+    }
+
+    set(rangeStart, rangeEnd) {
+        if (rangeStart !== this._rangeStart || rangeEnd !== this._rangeEnd) {
+            this._rangeStart = rangeStart;
+            this._rangeEnd = rangeEnd;
+            this._range = this._rangeEnd.getTime() - this._rangeStart.getTime();
+            this._events.dispatch(this._events.change, rangeStart, rangeEnd);
+        }
+    }
+
+    get current() {
+        return this._current;
+    }
+
+    get rangeStart() {
+        return this._rangeStart;
+    }
+
+    get rangeEnd() {
+        return this._rangeEnd;
+    }
+
+    get rangeStartTime() {
+        return this._rangeStart.getTime();
+    }
+
+    get rangeEndTime() {
+        return this._rangeEnd.getTime();
+    }
+
+    get currentTime() {
+        return this._current.getTime();
+    }
+
+    set current(current) {
+        if (current !== this._current) {
+            if (this._maxDate && current > this._maxDate) {
+                this._current = this._maxDate;
+            } else if (this._minDate && current < this._minDate) {
+                this._current = this._minDate;
+            } else {
+                this._current = current;
+            }
+            this._events.dispatch(this._events.current, this._current);
+        }
+    }
+
+    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);
+        }
+    }
+
+    set rangeEnd(date) {
+        if (date !== this._rangeEnd) {
+            this._rangeEnd = date;
+            this._range = this._rangeEnd.getTime() - this._rangeStart.getTime();
+            this._events.dispatch(this._events.change, date);
+        }
+    }
+}
+
+export { TimelineModel }