@openglobus/og 0.24.2 → 0.25.0

package/lib/js/control/selection/SelectionScene.js

@@ -1,272 +0,0 @@
-import { Entity } from '../../entity/Entity';
-import { Events } from '../../Events';
-import { Vector } from '../../layer/Vector';
-import { LonLat } from '../../LonLat';
-import { Object3d } from '../../Object3d';
-import { RenderNode } from '../../scene/RenderNode';
-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._ignoreTerrain = false;
-        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,
-            hideInLayerSwitcher: false
-        });
-        this._cornersLayer = new Vector("corners", {
-            entities: [this._cornerEntity[0], this._cornerEntity[1]],
-            pickingEnabled: true,
-            hideInLayerSwitcher: true,
-            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 res = this._planet.ellipsoid.direct(startLonLat, endLonLat);
-        this._heading = res.initialAzimuth;
-        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/lib/js/control/timeline/TimelineControl.d.ts

@@ -1,18 +0,0 @@
-import { Dialog } from "../../ui/Dialog";
-import { ToggleButton } from "../../ui/ToggleButton";
-import { Control, type IControlParams } from '../Control';
-import { TimelineView } from './TimelineView';
-interface ITimelineControlParams extends IControlParams {
-    name?: string;
-    current?: Date;
-    rangeStart?: Date;
-    rangeEnd?: Date;
-}
-declare class TimelineControl extends Control {
-    protected _timelineView: TimelineView;
-    protected _toggleBtn: ToggleButton;
-    protected _dialog: Dialog<null>;
-    constructor(options?: ITimelineControlParams);
-    oninit(): void;
-}
-export { TimelineControl };

package/lib/js/control/timeline/TimelineControl.js

@@ -1,81 +0,0 @@
-import { Dialog } from "../../ui/Dialog";
-import { ToggleButton } from "../../ui/ToggleButton";
-import { Control } from '../Control';
-import { TimelineView } from './TimelineView';
-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 = {}) {
-        super({
-            name: "timeline",
-            ...options
-        });
-        let currentDate = options.current || new Date();
-        let startDate = options.rangeStart || addHours(currentDate, -12);
-        let endDate = options.rangeEnd || addHours(currentDate, 12);
-        this._timelineView = new TimelineView({
-            rangeStart: startDate,
-            rangeEnd: endDate,
-            currentDate: currentDate
-        });
-        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.events.on("visibility", (v) => {
-            this._toggleBtn.setActive(v);
-        });
-    }
-    oninit() {
-        let $container = this.renderer.div;
-        this._toggleBtn.appendTo($container);
-        this._dialog.appendTo($container);
-        this._toggleBtn.events.on("change", (isActive) => {
-            this._dialog.setVisibility(isActive);
-            if (isActive) {
-                this._timelineView.resize();
-            }
-        });
-        this._timelineView.appendTo(this._dialog.container);
-        this._timelineView.events.on("setcurrent", (d) => {
-            this.renderer && this.renderer.handler.defaultClock.setDate(d);
-        });
-        this._timelineView.events.on("startdrag", () => {
-            this.planet?.sun.stop();
-            this.renderer && this.renderer.controls.mouseNavigation.deactivate();
-        });
-        this._timelineView.events.on("stopdrag", () => {
-            this.renderer && this.renderer.controls.mouseNavigation.activate();
-        });
-        this._timelineView.events.on("startdragcurrent", () => {
-            this.planet?.sun.stop();
-            this.renderer && this.renderer.controls.mouseNavigation.deactivate();
-        });
-        this._timelineView.events.on("stopdragcurrent", () => {
-            this.renderer && this.renderer.controls.mouseNavigation.activate();
-        });
-    }
-}
-export { TimelineControl };

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

@@ -1,41 +0,0 @@
-import { type EventsHandler } from '../../Events';
-type TimelineEventsList = ["change", "current"];
-interface ITimelineParams {
-    current?: Date;
-    rangeStart?: Date;
-    rangeEnd?: Date;
-    minDate?: Date | null;
-    maxDate?: Date | null;
-    multiplier?: number;
-}
-declare class TimelineModel {
-    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;
-    multiplier: number;
-    dt: number;
-    constructor(options?: ITimelineParams);
-    play(): void;
-    stop(): void;
-    stopped(): boolean;
-    protected _animationFrameCallback(): void;
-    protected _frame(): void;
-    get range(): number;
-    set(rangeStart: Date, rangeEnd: Date): void;
-    get current(): Date;
-    get rangeStart(): Date;
-    get rangeEnd(): Date;
-    get rangeStartTime(): number;
-    get rangeEndTime(): number;
-    get currentTime(): number;
-    set current(current: Date);
-    set rangeStart(date: Date);
-    set rangeEnd(date: Date);
-}
-export { TimelineModel };

package/lib/js/control/timeline/TimelineModel.js

@@ -1,104 +0,0 @@
-import { createEvents } from '../../Events';
-import { addSeconds } from "./timelineUtils";
-const TIMELINE_EVENTS = ["change", "current" /*, "tick"*/];
-class TimelineModel {
-    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;
-    }
-    play() {
-        if (!this._requestAnimationFrameId) {
-            this._prevNow = window.performance.now();
-            this._animationFrameCallback();
-        }
-    }
-    stop() {
-        if (this._requestAnimationFrameId) {
-            window.cancelAnimationFrame(this._requestAnimationFrameId);
-            this._requestAnimationFrameId = 0;
-        }
-    }
-    stopped() {
-        return 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);
-        // 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 };

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

@@ -1,86 +0,0 @@
-import type { EventsHandler } from "../../Events";
-import { ButtonGroup } from "../../ui/ButtonGroup";
-import { View } from '../../ui/View';
-import type { IViewParams, ViewEventsList } from '../../ui/View';
-import { ToggleButton } from "../../ui/ToggleButton";
-import { TimelineModel } from './TimelineModel';
-import type { 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 };