@mapgis/mapbox-gl 16.0.1 → 16.2.0

package/src/ui/control/attribution_control.js

@@ -1,189 +0,0 @@
-// @flow
-
-import DOM from '../../util/dom';
-import {bindAll} from '../../util/util';
-import config from '../../util/config';
-
-import type Map from '../map';
-
-type Options = {
-    compact?: boolean,
-    customAttribution?: string | Array<string>
-};
-
-/**
- * An `AttributionControl` control presents the map's [attribution information](https://www.mapbox.com/help/attribution/).
- *
- * @implements {IControl}
- * @param {Object} [options]
- * @param {boolean} [options.compact] If `true` force a compact attribution that shows the full attribution on mouse hover, or if `false` force the full attribution control. The default is a responsive attribution that collapses when the map is less than 640 pixels wide.
- * @param {string | Array<string>} [options.customAttribution] String or strings to show in addition to any other attributions.
- * @example
- * var map = new mapboxgl.Map({attributionControl: false})
- *     .addControl(new mapboxgl.AttributionControl({
- *         compact: true
- *     }));
- */
-class AttributionControl {
-    options: Options;
-    _map: Map;
-    _container: HTMLElement;
-    _innerContainer: HTMLElement;
-    _editLink: ?HTMLAnchorElement;
-    _attribHTML: string;
-    styleId: string;
-    styleOwner: string;
-
-    constructor(options: Options = {}) {
-        this.options = options;
-
-        bindAll([
-            '_updateEditLink',
-            '_updateData',
-            '_updateCompact'
-        ], this);
-    }
-
-    getDefaultPosition() {
-        return 'bottom-right';
-    }
-
-    onAdd(map: Map) {
-        const compact = this.options && this.options.compact;
-
-        this._map = map;
-        this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-attrib');
-        this._innerContainer = DOM.create('div', 'mapboxgl-ctrl-attrib-inner', this._container);
-
-        if (compact) {
-            this._container.classList.add('mapboxgl-compact');
-        }
-
-        this._updateAttributions();
-        this._updateEditLink();
-
-        this._map.on('styledata', this._updateData);
-        this._map.on('sourcedata', this._updateData);
-        this._map.on('moveend', this._updateEditLink);
-
-        if (compact === undefined) {
-            this._map.on('resize', this._updateCompact);
-            this._updateCompact();
-        }
-
-        return this._container;
-    }
-
-    onRemove() {
-        DOM.remove(this._container);
-
-        this._map.off('styledata', this._updateData);
-        this._map.off('sourcedata', this._updateData);
-        this._map.off('moveend', this._updateEditLink);
-        this._map.off('resize', this._updateCompact);
-
-        this._map = (undefined: any);
-        this._attribHTML = (undefined: any);
-    }
-
-    _updateEditLink() {
-        let editLink = this._editLink;
-        if (!editLink) {
-            editLink = this._editLink = (this._container.querySelector('.mapbox-improve-map'): any);
-        }
-
-        const params = [
-            {key: "owner", value: this.styleOwner},
-            {key: "id", value: this.styleId},
-            {key: "access_token", value: this._map._requestManager._customAccessToken || config.ACCESS_TOKEN}
-        ];
-
-        if (editLink) {
-            const paramString = params.reduce((acc, next, i) => {
-                if (next.value) {
-                    acc += `${next.key}=${next.value}${i < params.length - 1 ? '&' : ''}`;
-                }
-                return acc;
-            }, `?`);
-            editLink.href = `${config.FEEDBACK_URL}/${paramString}${this._map._hash ? this._map._hash.getHashString(true) : ''}`;
-            editLink.rel = "noopener nofollow";
-        }
-    }
-
-    _updateData(e: any) {
-        if (e && (e.sourceDataType === 'metadata' || e.dataType === 'style')) {
-            this._updateAttributions();
-            this._updateEditLink();
-        }
-    }
-
-    _updateAttributions() {
-        if (!this._map.style) return;
-        let attributions: Array<string> = [];
-        if (this.options.customAttribution) {
-            if (Array.isArray(this.options.customAttribution)) {
-                attributions = attributions.concat(
-                    this.options.customAttribution.map(attribution => {
-                        if (typeof attribution !== 'string') return '';
-                        return attribution;
-                    })
-                );
-            } else if (typeof this.options.customAttribution === 'string') {
-                attributions.push(this.options.customAttribution);
-            }
-        }
-
-        if (this._map.style.stylesheet) {
-            const stylesheet: any = this._map.style.stylesheet;
-            this.styleOwner = stylesheet.owner;
-            this.styleId = stylesheet.id;
-        }
-
-        const sourceCaches = this._map.style.sourceCaches;
-        for (const id in sourceCaches) {
-            const sourceCache = sourceCaches[id];
-            if (sourceCache.used) {
-                const source = sourceCache.getSource();
-                if (source.attribution && attributions.indexOf(source.attribution) < 0) {
-                    attributions.push(source.attribution);
-                }
-            }
-        }
-
-        // remove any entries that are substrings of another entry.
-        // first sort by length so that substrings come first
-        attributions.sort((a, b) => a.length - b.length);
-        attributions = attributions.filter((attrib, i) => {
-            for (let j = i + 1; j < attributions.length; j++) {
-                if (attributions[j].indexOf(attrib) >= 0) { return false; }
-            }
-            return true;
-        });
-
-        // check if attribution string is different to minimize DOM changes
-        const attribHTML = attributions.join(' | ');
-        if (attribHTML === this._attribHTML) return;
-
-        this._attribHTML = attribHTML;
-
-        if (attributions.length) {
-            this._innerContainer.innerHTML = attribHTML;
-            this._container.classList.remove('mapboxgl-attrib-empty');
-        } else {
-            this._container.classList.add('mapboxgl-attrib-empty');
-        }
-        // remove old DOM node from _editLink
-        this._editLink = null;
-    }
-
-    _updateCompact() {
-        if (this._map.getCanvasContainer().offsetWidth <= 640) {
-            this._container.classList.add('mapboxgl-compact');
-        } else {
-            this._container.classList.remove('mapboxgl-compact');
-        }
-    }
-
-}
-
-export default AttributionControl;

package/src/ui/control/fps_control.js

@@ -1,185 +0,0 @@
-// @flow
-import {extend, bindAll} from '../../util/util';
-
-import type Map from "../map";
-
-/**
- * A `FpsControl` FPS帧率控件
- *
- * @implements {IControl}
- * @param {Object} [options]
- *
- * @example
- * map.addControl(new mapboxgl.FpsControl();
- * @see [示例](https://labs.mapbox.com/mapbox-gl-framerate/)
- */
-class FpsControl {
-    frames: number;
-    totalTime: number;
-    totalFrames: number;
-    options;
-    map: Map;
-    container: HTMLElement;
-    readOutput: HTMLElement;
-    canvas;
-    time;
-
-    constructor(options) {
-        bindAll([
-            'onMoveStart',
-            'onMoveEnd',
-            'onRender',
-            'getFPS',
-            'updateGraph',
-        ], this);
-
-        const dpr = window.devicePixelRatio;
-        const defaultOptions = {
-            background: "rgba(0,0,0,0.9)",
-            barWidth: 4 * dpr,
-            color: "#7cf859",
-            font: "Monaco, Consolas, Courier, monospace",
-            graphHeight: 60 * dpr,
-            graphWidth: 120 * dpr,
-            graphTop: 0,
-            graphRight: 5 * dpr,
-            width: 130 * dpr,
-        };
-
-        this.frames = 0;
-        this.totalTime = 0;
-        this.totalFrames = 0;
-        this.options = Object.assign({}, defaultOptions, options );
-    }
-
-    onAdd(map: Map) {
-        this.map = map;
-        console.log('onAdd', this.map);
-        const dpr = window.devicePixelRatio;
-        const {
-            width,
-            graphWidth,
-            graphHeight,
-            color,
-            background,
-            font,
-        } = this.options;
-
-        const el = (this.container = document.createElement("div"));
-        el.className = "mapboxgl-ctrl mapboxgl-ctrl-fps";
-
-        el.style.backgroundColor = background;
-        el.style.borderRadius = "6px";
-
-        this.readOutput = document.createElement("div");
-        this.readOutput.style.color = color;
-        this.readOutput.style.fontFamily = font;
-        this.readOutput.style.padding = "0 5px 5px";
-        this.readOutput.style.fontSize = "9px";
-        this.readOutput.style.fontWeight = "bold";
-        this.readOutput.textContent = "Waiting…";
-
-        this.canvas = document.createElement("canvas");
-        this.canvas.className = "mapboxgl-ctrl-canvas";
-        this.canvas.width = width;
-        this.canvas.height = graphHeight;
-        this.canvas.style.cssText = `width: ${width / dpr}px; height: ${
-            graphHeight / dpr
-        }px;`;
-
-        el.appendChild(this.readOutput);
-        el.appendChild(this.canvas);
-
-        this.map.on("movestart", this.onMoveStart);
-        this.map.on("moveend", this.onMoveEnd);
-        return this.container;
-    }
-
-    onMoveStart() {
-        this.frames = 0;
-        this.time = performance.now();
-        this.map.on("render", this.onRender);
-    }
-
-    onMoveEnd() {
-        const now = performance.now();
-        this.updateGraph(this.getFPS(now));
-        this.frames = 0;
-        this.time = null;
-        this.map.off("render", this.onRender);
-    }
-
-    onRender() {
-        this.frames++;
-        const now = performance.now();
-        if (now >= this.time + 1e3) {
-            this.updateGraph(this.getFPS(now));
-            this.frames = 0;
-            this.time = now;
-        }
-    }
-
-    getFPS(now) {
-        (this.totalTime += now - this.time), (this.totalFrames += this.frames);
-        return Math.round((1e3 * this.frames) / (now - this.time)) || 0;
-    }
-
-    updateGraph(fpsNow) {
-        const {
-            barWidth,
-            graphRight,
-            graphTop,
-            graphWidth,
-            graphHeight,
-            background,
-            color,
-        } = this.options;
-
-        const context = this.canvas.getContext("2d");
-        const fps = Math.round((1e3 * this.totalFrames) / this.totalTime) || 0;
-        const rect = (graphHeight, barWidth);
-
-        context.fillStyle = background;
-        context.globalAlpha = 1;
-        context.fillRect(0, 0, graphWidth, graphTop);
-        context.fillStyle = color;
-
-        this.readOutput.textContent = `当前:${fpsNow} (平均:${fps} )`;
-        context.drawImage(
-            this.canvas,
-            graphRight + rect,
-            graphTop,
-            graphWidth - rect,
-            graphHeight,
-            graphRight,
-            graphTop,
-            graphWidth - rect,
-            graphHeight
-        );
-        context.fillRect(
-            graphRight + graphWidth - rect,
-            graphTop,
-            rect,
-            graphHeight
-        );
-        context.fillStyle = background;
-        context.globalAlpha = 0.75;
-        context.fillRect(
-            graphRight + graphWidth - rect,
-            graphTop,
-            rect,
-            (1 - fpsNow / 100) * graphHeight
-        );
-    }
-
-    onRemove() {
-        this.map.off("render", this.onRender);
-        this.map.off("movestart", this.onMoveStart);
-        this.map.off("moveend", this.onMoveEnd);
-        this.container.parentNode.removeChild(this.container);
-        this.map = null;
-        return this;
-    }
-}
-
-export default FpsControl;

package/src/ui/control/fullscreen_control.js

@@ -1,147 +0,0 @@
-// @flow
-
-import DOM from '../../util/dom';
-
-import {bindAll, warnOnce} from '../../util/util';
-import window from '../../util/window';
-
-import type Map from '../map';
-
-type Options = {
-    container?: HTMLElement
-};
-
-/**
- * A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode.
- *
- * @implements {IControl}
- * @param {Object} [options]
- * @param {HTMLElement} [options.container] `container` is the [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen. By default, the map container element will be made full screen.
- *
- * @example
- * map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')}));
- * @see [View a fullscreen map](https://www.mapbox.com/mapbox-gl-js/example/fullscreen/)
- */
-
-class FullscreenControl {
-    _map: Map;
-    _controlContainer: HTMLElement;
-    _fullscreen: boolean;
-    _fullscreenchange: string;
-    _fullscreenButton: HTMLElement;
-    _container: HTMLElement;
-
-    constructor(options: Options) {
-        this._fullscreen = false;
-        if (options && options.container) {
-            if (options.container instanceof window.HTMLElement) {
-                this._container = options.container;
-            } else {
-                warnOnce('Full screen control \'container\' must be a DOM element.');
-            }
-        }
-        bindAll([
-            '_onClickFullscreen',
-            '_changeIcon'
-        ], this);
-        if ('onfullscreenchange' in window.document) {
-            this._fullscreenchange = 'fullscreenchange';
-        } else if ('onmozfullscreenchange' in window.document) {
-            this._fullscreenchange = 'mozfullscreenchange';
-        } else if ('onwebkitfullscreenchange' in window.document) {
-            this._fullscreenchange = 'webkitfullscreenchange';
-        } else if ('onmsfullscreenchange' in window.document) {
-            this._fullscreenchange = 'MSFullscreenChange';
-        }
-    }
-
-    onAdd(map: Map) {
-        this._map = map;
-        if (!this._container) this._container = this._map.getContainer();
-        this._controlContainer = DOM.create('div', `mapboxgl-ctrl mapboxgl-ctrl-group`);
-        if (this._checkFullscreenSupport()) {
-            this._setupUI();
-        } else {
-            this._controlContainer.style.display = 'none';
-            warnOnce('This device does not support fullscreen mode.');
-        }
-        return this._controlContainer;
-    }
-
-    onRemove() {
-        DOM.remove(this._controlContainer);
-        this._map = (null: any);
-        window.document.removeEventListener(this._fullscreenchange, this._changeIcon);
-    }
-
-    _checkFullscreenSupport() {
-        return !!(
-            window.document.fullscreenEnabled ||
-            (window.document: any).mozFullScreenEnabled ||
-            (window.document: any).msFullscreenEnabled ||
-            (window.document: any).webkitFullscreenEnabled
-        );
-    }
-
-    _setupUI() {
-        const button = this._fullscreenButton = DOM.create('button', (`mapboxgl-ctrl-fullscreen`), this._controlContainer);
-        DOM.create('span', `mapboxgl-ctrl-icon`, button).setAttribute('aria-hidden', true);
-        button.type = 'button';
-        this._updateTitle();
-        this._fullscreenButton.addEventListener('click', this._onClickFullscreen);
-        window.document.addEventListener(this._fullscreenchange, this._changeIcon);
-    }
-
-    _updateTitle() {
-        const title = this._getTitle();
-        this._fullscreenButton.setAttribute("aria-label", title);
-        this._fullscreenButton.title = title;
-    }
-
-    _getTitle() {
-        return this._map._getUIString(this._isFullscreen() ? 'FullscreenControl.Exit' : 'FullscreenControl.Enter');
-    }
-
-    _isFullscreen() {
-        return this._fullscreen;
-    }
-
-    _changeIcon() {
-        const fullscreenElement =
-            window.document.fullscreenElement ||
-            (window.document: any).mozFullScreenElement ||
-            (window.document: any).webkitFullscreenElement ||
-            (window.document: any).msFullscreenElement;
-
-        if ((fullscreenElement === this._container) !== this._fullscreen) {
-            this._fullscreen = !this._fullscreen;
-            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-shrink`);
-            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-fullscreen`);
-            this._updateTitle();
-        }
-    }
-
-    _onClickFullscreen() {
-        if (this._isFullscreen()) {
-            if (window.document.exitFullscreen) {
-                (window.document: any).exitFullscreen();
-            } else if (window.document.mozCancelFullScreen) {
-                (window.document: any).mozCancelFullScreen();
-            } else if (window.document.msExitFullscreen) {
-                (window.document: any).msExitFullscreen();
-            } else if (window.document.webkitCancelFullScreen) {
-                (window.document: any).webkitCancelFullScreen();
-            }
-        } else if (this._container.requestFullscreen) {
-            this._container.requestFullscreen();
-        } else if ((this._container: any).mozRequestFullScreen) {
-            (this._container: any).mozRequestFullScreen();
-        } else if ((this._container: any).msRequestFullscreen) {
-            (this._container: any).msRequestFullscreen();
-        } else if ((this._container: any).webkitRequestFullscreen) {
-            (this._container: any).webkitRequestFullscreen();
-        }
-    }
-}
-
-export default FullscreenControl;