@mapgis/mapbox-gl 16.0.0 → 16.2.0

package/src/style/style_glyph.js

@@ -1,17 +0,0 @@
-// @flow
-
-import type {AlphaImage} from '../util/image';
-
-export type GlyphMetrics = {
-    width: number,
-    height: number,
-    left: number,
-    top: number,
-    advance: number
-};
-
-export type StyleGlyph = {
-    id: number,
-    bitmap: AlphaImage,
-    metrics: GlyphMetrics
-};

package/src/style/style_image.js

@@ -1,137 +0,0 @@
-// @flow
-
-import {RGBAImage} from '../util/image';
-
-import type Map from '../ui/map';
-
-export type StyleImageData = {
-    data: RGBAImage,
-    version: number,
-    hasRenderCallback?: boolean,
-    userImage?: StyleImageInterface
-};
-
-export type StyleImageMetadata = {
-    pixelRatio: number,
-    sdf: boolean,
-    stretchX?: Array<[number, number]>,
-    stretchY?: Array<[number, number]>,
-    content?: [number, number, number, number]
-};
-
-export type StyleImage = StyleImageData & StyleImageMetadata;
-
-export type StyleImageInterface = {
-    width: number,
-    height: number,
-    data: Uint8Array | Uint8ClampedArray,
-    render?: () => void,
-    onAdd?: (map: Map, id: string) => void,
-    onRemove?: () => void
-};
-
-export function renderStyleImage(image: StyleImage) {
-    const {userImage} = image;
-    if (userImage && userImage.render) {
-        const updated = userImage.render();
-        if (updated) {
-            image.data.replace(new Uint8Array(userImage.data.buffer));
-            return true;
-        }
-    }
-    return false;
-}
-
-/**
- * Interface for dynamically generated style images. This is a specification for
- * implementers to model: it is not an exported method or class.
- *
- * Images implementing this interface can be redrawn for every frame. They can be used to animate
- * icons and patterns or make them respond to user input. Style images can implement a
- * {@link StyleImageInterface#render} method. The method is called every frame and
- * can be used to update the image.
- *
- * @interface StyleImageInterface
- * @property {number} width
- * @property {number} height
- * @property {Uint8Array | Uint8ClampedArray} data
- *
- * @see [Add an animated icon to the map.](https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/)
- *
- * @example
- * var flashingSquare = {
- *     width: 64,
- *     height: 64,
- *     data: new Uint8Array(64 * 64 * 4),
- *
- *     onAdd: function(map) {
- *         this.map = map;
- *     },
- *
- *     render: function() {
- *         // keep repainting while the icon is on the map
- *         this.map.triggerRepaint();
- *
- *         // alternate between black and white based on the time
- *         var value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;
- *
- *         // check if image needs to be changed
- *         if (value !== this.previousValue) {
- *             this.previousValue = value;
- *
- *             var bytesPerPixel = 4;
- *             for (var x = 0; x < this.width; x++) {
- *                 for (var y = 0; y < this.height; y++) {
- *                     var offset = (y * this.width + x) * bytesPerPixel;
- *                     this.data[offset + 0] = value;
- *                     this.data[offset + 1] = value;
- *                     this.data[offset + 2] = value;
- *                     this.data[offset + 3] = 255;
- *                 }
- *             }
- *
- *             // return true to indicate that the image changed
- *             return true;
- *         }
- *     }
- *  }
- *
- *  map.addImage('flashing_square', flashingSquare);
- */
-
-/**
- * This method is called once before every frame where the icon will be used.
- * The method can optionally update the image's `data` member with a new image.
- *
- * If the method updates the image it must return `true` to commit the change.
- * If the method returns `false` or nothing the image is assumed to not have changed.
- *
- * If updates are infrequent it maybe easier to use {@link Map#updateImage} to update
- * the image instead of implementing this method.
- *
- * @function
- * @memberof StyleImageInterface
- * @instance
- * @name render
- * @return {boolean} `true` if this method updated the image. `false` if the image was not changed.
- */
-
-/**
- * Optional method called when the layer has been added to the Map with {@link Map#addImage}.
- *
- * @function
- * @memberof StyleImageInterface
- * @instance
- * @name onAdd
- * @param {Map} map The Map this custom layer was just added to.
- */
-
-/**
- * Optional method called when the icon is removed from the map with {@link Map#removeImage}.
- * This gives the image a chance to clean up resources and event listeners.
- *
- * @function
- * @memberof StyleImageInterface
- * @instance
- * @name onRemove
- */

package/src/style/style_layer/background_style_layer.js

@@ -1,21 +0,0 @@
-// @flow
-
-import StyleLayer from '../style_layer';
-
-import properties from './background_style_layer_properties';
-import {Transitionable, Transitioning, PossiblyEvaluated} from '../properties';
-
-import type {PaintProps} from './background_style_layer_properties';
-import type {LayerSpecification} from '../../style-spec/types';
-
-class BackgroundStyleLayer extends StyleLayer {
-    _transitionablePaint: Transitionable<PaintProps>;
-    _transitioningPaint: Transitioning<PaintProps>;
-    paint: PossiblyEvaluated<PaintProps>;
-
-    constructor(layer: LayerSpecification) {
-        super(layer, properties);
-    }
-}
-
-export default BackgroundStyleLayer;

package/src/style/style_layer/background_style_layer_properties.js

@@ -1,40 +0,0 @@
-// This file is generated. Edit build/generate-style-code.js, then run `yarn run codegen`.
-// @flow
-/* eslint-disable */
-
-import styleSpec from '../../style-spec/reference/latest';
-
-import {
-    Properties,
-    DataConstantProperty,
-    DataDrivenProperty,
-    CrossFadedDataDrivenProperty,
-    CrossFadedProperty,
-    ColorRampProperty
-} from '../properties';
-
-import type Color from '../../style-spec/util/color';
-
-import type Formatted from '../../style-spec/expression/types/formatted';
-
-import type ResolvedImage from '../../style-spec/expression/types/resolved_image';
-
-
-export type PaintProps = {|
-    "background-color": DataConstantProperty<Color>,
-    "background-pattern": CrossFadedProperty<ResolvedImage>,
-    "background-opacity": DataConstantProperty<number>,
-|};
-
-const paint: Properties<PaintProps> = new Properties({
-    "background-color": new DataConstantProperty(styleSpec["paint_background"]["background-color"]),
-    "background-pattern": new CrossFadedProperty(styleSpec["paint_background"]["background-pattern"]),
-    "background-opacity": new DataConstantProperty(styleSpec["paint_background"]["background-opacity"]),
-});
-
-// Note: without adding the explicit type annotation, Flow infers weaker types
-// for these objects from their use in the constructor to StyleLayer, as
-// {layout?: Properties<...>, paint: Properties<...>}
-export default ({ paint }: $Exact<{
-  paint: Properties<PaintProps>
-}>);

package/src/style/style_layer/circle_style_layer.js

@@ -1,98 +0,0 @@
-// @flow
-
-import StyleLayer from '../style_layer';
-
-import CircleBucket from '../../data/bucket/circle_bucket';
-import {polygonIntersectsBufferedPoint} from '../../util/intersection_tests';
-import {getMaximumPaintValue, translateDistance, translate} from '../query_utils';
-import properties from './circle_style_layer_properties';
-import {Transitionable, Transitioning, Layout, PossiblyEvaluated} from '../properties';
-import {vec4} from 'gl-matrix';
-import Point from '@mapbox/point-geometry';
-
-import type {FeatureState} from '../../style-spec/expression';
-import type Transform from '../../geo/transform';
-import type {Bucket, BucketParameters} from '../../data/bucket';
-import type {LayoutProps, PaintProps} from './circle_style_layer_properties';
-import type {LayerSpecification} from '../../style-spec/types';
-
-class CircleStyleLayer extends StyleLayer {
-    _unevaluatedLayout: Layout<LayoutProps>;
-    layout: PossiblyEvaluated<LayoutProps>;
-
-    _transitionablePaint: Transitionable<PaintProps>;
-    _transitioningPaint: Transitioning<PaintProps>;
-    paint: PossiblyEvaluated<PaintProps>;
-
-    constructor(layer: LayerSpecification) {
-        super(layer, properties);
-    }
-
-    createBucket(parameters: BucketParameters<*>) {
-        return new CircleBucket(parameters);
-    }
-
-    queryRadius(bucket: Bucket): number {
-        const circleBucket: CircleBucket<CircleStyleLayer> = (bucket: any);
-        return getMaximumPaintValue('circle-radius', this, circleBucket) +
-            getMaximumPaintValue('circle-stroke-width', this, circleBucket) +
-            translateDistance(this.paint.get('circle-translate'));
-    }
-
-    queryIntersectsFeature(queryGeometry: Array<Point>,
-                           feature: VectorTileFeature,
-                           featureState: FeatureState,
-                           geometry: Array<Array<Point>>,
-                           zoom: number,
-                           transform: Transform,
-                           pixelsToTileUnits: number,
-                           pixelPosMatrix: Float32Array): boolean {
-        const translatedPolygon = translate(queryGeometry,
-            this.paint.get('circle-translate'),
-            this.paint.get('circle-translate-anchor'),
-            transform.angle, pixelsToTileUnits);
-        const radius = this.paint.get('circle-radius').evaluate(feature, featureState);
-        const stroke = this.paint.get('circle-stroke-width').evaluate(feature, featureState);
-        const size  = radius + stroke;
-
-        // For pitch-alignment: map, compare feature geometry to query geometry in the plane of the tile
-        // // Otherwise, compare geometry in the plane of the viewport
-        // // A circle with fixed scaling relative to the viewport gets larger in tile space as it moves into the distance
-        // // A circle with fixed scaling relative to the map gets smaller in viewport space as it moves into the distance
-        const alignWithMap = this.paint.get('circle-pitch-alignment') === 'map';
-        const transformedPolygon = alignWithMap ? translatedPolygon : projectQueryGeometry(translatedPolygon, pixelPosMatrix);
-        const transformedSize = alignWithMap ? size * pixelsToTileUnits : size;
-
-        for (const ring of geometry) {
-            for (const point of ring) {
-
-                const transformedPoint = alignWithMap ? point : projectPoint(point, pixelPosMatrix);
-
-                let adjustedSize = transformedSize;
-                const projectedCenter = vec4.transformMat4([], [point.x, point.y, 0, 1], pixelPosMatrix);
-                if (this.paint.get('circle-pitch-scale') === 'viewport' && this.paint.get('circle-pitch-alignment') === 'map') {
-                    adjustedSize *= projectedCenter[3] / transform.cameraToCenterDistance;
-                } else if (this.paint.get('circle-pitch-scale') === 'map' && this.paint.get('circle-pitch-alignment') === 'viewport') {
-                    adjustedSize *= transform.cameraToCenterDistance / projectedCenter[3];
-                }
-
-                if (polygonIntersectsBufferedPoint(transformedPolygon, transformedPoint, adjustedSize)) return true;
-            }
-        }
-
-        return false;
-    }
-}
-
-function projectPoint(p: Point, pixelPosMatrix: Float32Array) {
-    const point = vec4.transformMat4([], [p.x, p.y, 0, 1], pixelPosMatrix);
-    return new Point(point[0] / point[3], point[1] / point[3]);
-}
-
-function projectQueryGeometry(queryGeometry: Array<Point>, pixelPosMatrix: Float32Array) {
-    return queryGeometry.map((p) => {
-        return projectPoint(p, pixelPosMatrix);
-    });
-}
-
-export default CircleStyleLayer;

package/src/style/style_layer/circle_style_layer_properties.js

@@ -1,63 +0,0 @@
-// This file is generated. Edit build/generate-style-code.js, then run `yarn run codegen`.
-// @flow
-/* eslint-disable */
-
-import styleSpec from '../../style-spec/reference/latest';
-
-import {
-    Properties,
-    DataConstantProperty,
-    DataDrivenProperty,
-    CrossFadedDataDrivenProperty,
-    CrossFadedProperty,
-    ColorRampProperty
-} from '../properties';
-
-import type Color from '../../style-spec/util/color';
-
-import type Formatted from '../../style-spec/expression/types/formatted';
-
-import type ResolvedImage from '../../style-spec/expression/types/resolved_image';
-
-export type LayoutProps = {|
-    "circle-sort-key": DataDrivenProperty<number>,
-|};
-
-const layout: Properties<LayoutProps> = new Properties({
-    "circle-sort-key": new DataDrivenProperty(styleSpec["layout_circle"]["circle-sort-key"]),
-});
-
-export type PaintProps = {|
-    "circle-radius": DataDrivenProperty<number>,
-    "circle-color": DataDrivenProperty<Color>,
-    "circle-blur": DataDrivenProperty<number>,
-    "circle-opacity": DataDrivenProperty<number>,
-    "circle-translate": DataConstantProperty<[number, number]>,
-    "circle-translate-anchor": DataConstantProperty<"map" | "viewport">,
-    "circle-pitch-scale": DataConstantProperty<"map" | "viewport">,
-    "circle-pitch-alignment": DataConstantProperty<"map" | "viewport">,
-    "circle-stroke-width": DataDrivenProperty<number>,
-    "circle-stroke-color": DataDrivenProperty<Color>,
-    "circle-stroke-opacity": DataDrivenProperty<number>,
-|};
-
-const paint: Properties<PaintProps> = new Properties({
-    "circle-radius": new DataDrivenProperty(styleSpec["paint_circle"]["circle-radius"]),
-    "circle-color": new DataDrivenProperty(styleSpec["paint_circle"]["circle-color"]),
-    "circle-blur": new DataDrivenProperty(styleSpec["paint_circle"]["circle-blur"]),
-    "circle-opacity": new DataDrivenProperty(styleSpec["paint_circle"]["circle-opacity"]),
-    "circle-translate": new DataConstantProperty(styleSpec["paint_circle"]["circle-translate"]),
-    "circle-translate-anchor": new DataConstantProperty(styleSpec["paint_circle"]["circle-translate-anchor"]),
-    "circle-pitch-scale": new DataConstantProperty(styleSpec["paint_circle"]["circle-pitch-scale"]),
-    "circle-pitch-alignment": new DataConstantProperty(styleSpec["paint_circle"]["circle-pitch-alignment"]),
-    "circle-stroke-width": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-width"]),
-    "circle-stroke-color": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-color"]),
-    "circle-stroke-opacity": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-opacity"]),
-});
-
-// Note: without adding the explicit type annotation, Flow infers weaker types
-// for these objects from their use in the constructor to StyleLayer, as
-// {layout?: Properties<...>, paint: Properties<...>}
-export default ({ paint, layout }: $Exact<{
-  paint: Properties<PaintProps>, layout: Properties<LayoutProps>
-}>);

package/src/style/style_layer/custom_style_layer.js

@@ -1,223 +0,0 @@
-// @flow
-
-import StyleLayer from '../style_layer';
-import type Map from '../../ui/map';
-import assert from 'assert';
-
-type CustomRenderMethod = (gl: WebGLRenderingContext, matrix: Array<number>) => void;
-
-/**
- * Interface for custom style layers. This is a specification for
- * implementers to model: it is not an exported method or class.
- *
- * Custom layers allow a user to render directly into the map's GL context using the map's camera.
- * These layers can be added between any regular layers using {@link Map#addLayer}.
- *
- * Custom layers must have a unique `id` and must have the `type` of `"custom"`.
- * They must implement `render` and may implement `prerender`, `onAdd` and `onRemove`.
- * They can trigger rendering using {@link Map#triggerRepaint}
- * and they should appropriately handle {@link Map.event:webglcontextlost} and
- * {@link Map.event:webglcontextrestored}.
- *
- * The `renderingMode` property controls whether the layer is treated as a `"2d"` or `"3d"` map layer. Use:
- * - `"renderingMode": "3d"` to use the depth buffer and share it with other layers
- * - `"renderingMode": "2d"` to add a layer with no depth. If you need to use the depth buffer for a `"2d"` layer you must use an offscreen
- *   framebuffer and {@link CustomLayerInterface#prerender}
- *
- * @interface CustomLayerInterface
- * @property {string} id A unique layer id.
- * @property {string} type The layer's type. Must be `"custom"`.
- * @property {string} renderingMode Either `"2d"` or `"3d"`. Defaults to `"2d"`.
- * @example
- * // Custom layer implemented as ES6 class
- * class NullIslandLayer {
- *     constructor() {
- *         this.id = 'null-island';
- *         this.type = 'custom';
- *         this.renderingMode = '2d';
- *     }
- *
- *     onAdd(map, gl) {
- *         const vertexSource = `
- *         uniform mat4 u_matrix;
- *         void main() {
- *             gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);
- *             gl_PointSize = 20.0;
- *         }`;
- *
- *         const fragmentSource = `
- *         void main() {
- *             gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
- *         }`;
- *
- *         const vertexShader = gl.createShader(gl.VERTEX_SHADER);
- *         gl.shaderSource(vertexShader, vertexSource);
- *         gl.compileShader(vertexShader);
- *         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
- *         gl.shaderSource(fragmentShader, fragmentSource);
- *         gl.compileShader(fragmentShader);
- *
- *         this.program = gl.createProgram();
- *         gl.attachShader(this.program, vertexShader);
- *         gl.attachShader(this.program, fragmentShader);
- *         gl.linkProgram(this.program);
- *     }
- *
- *     render(gl, matrix) {
- *         gl.useProgram(this.program);
- *         gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
- *         gl.drawArrays(gl.POINTS, 0, 1);
- *     }
- * }
- *
- * map.on('load', function() {
- *     map.addLayer(new NullIslandLayer());
- * });
- */
-
-/**
- * Optional method called when the layer has been added to the Map with {@link Map#addLayer}. This
- * gives the layer a chance to initialize gl resources and register event listeners.
- *
- * @function
- * @memberof CustomLayerInterface
- * @instance
- * @name onAdd
- * @param {Map} map The Map this custom layer was just added to.
- * @param {WebGLRenderingContext} gl The gl context for the map.
- */
-
-/**
- * Optional method called when the layer has been removed from the Map with {@link Map#removeLayer}. This
- * gives the layer a chance to clean up gl resources and event listeners.
- *
- * @function
- * @memberof CustomLayerInterface
- * @instance
- * @name onRemove
- * @param {Map} map The Map this custom layer was just added to.
- * @param {WebGLRenderingContext} gl The gl context for the map.
- */
-
-/**
- * Optional method called during a render frame to allow a layer to prepare resources or render into a texture.
- *
- * The layer cannot make any assumptions about the current GL state and must bind a framebuffer before rendering.
- *
- * @function
- * @memberof CustomLayerInterface
- * @instance
- * @name prerender
- * @param {WebGLRenderingContext} gl The map's gl context.
- * @param {Array<number>} matrix The map's camera matrix. It projects spherical mercator
- * coordinates to gl coordinates. The mercator coordinate `[0, 0]` represents the
- * top left corner of the mercator world and `[1, 1]` represents the bottom right corner. When
- * the `renderingMode` is `"3d"`, the z coordinate is conformal. A box with identical x, y, and z
- * lengths in mercator units would be rendered as a cube. {@link MercatorCoordinate}.fromLatLng
- * can be used to project a `LngLat` to a mercator coordinate.
- */
-
-/**
- * Called during a render frame allowing the layer to draw into the GL context.
- *
- * The layer can assume blending and depth state is set to allow the layer to properly
- * blend and clip other layers. The layer cannot make any other assumptions about the
- * current GL state.
- *
- * If the layer needs to render to a texture, it should implement the `prerender` method
- * to do this and only use the `render` method for drawing directly into the main framebuffer.
- *
- * The blend function is set to `gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)`. This expects
- * colors to be provided in premultiplied alpha form where the `r`, `g` and `b` values are already
- * multiplied by the `a` value. If you are unable to provide colors in premultiplied form you
- * may want to change the blend function to
- * `gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA)`.
- *
- * @function
- * @memberof CustomLayerInterface
- * @instance
- * @name render
- * @param {WebGLRenderingContext} gl The map's gl context.
- * @param {Array<number>} matrix The map's camera matrix. It projects spherical mercator
- * coordinates to gl coordinates. The spherical mercator coordinate `[0, 0]` represents the
- * top left corner of the mercator world and `[1, 1]` represents the bottom right corner. When
- * the `renderingMode` is `"3d"`, the z coordinate is conformal. A box with identical x, y, and z
- * lengths in mercator units would be rendered as a cube. {@link MercatorCoordinate}.fromLatLng
- * can be used to project a `LngLat` to a mercator coordinate.
- */
-export type CustomLayerInterface = {
-    id: string,
-    type: "custom",
-    renderingMode: "2d" | "3d",
-    render: CustomRenderMethod,
-    prerender: ?CustomRenderMethod,
-    onAdd: ?(map: Map, gl: WebGLRenderingContext) => void,
-    onRemove: ?(map: Map, gl: WebGLRenderingContext) => void
-}
-
-export function validateCustomStyleLayer(layerObject: CustomLayerInterface) {
-    const errors = [];
-    const id = layerObject.id;
-
-    if (id === undefined) {
-        errors.push({
-            message: `layers.${id}: missing required property "id"`
-        });
-    }
-
-    if (layerObject.render === undefined) {
-        errors.push({
-            message: `layers.${id}: missing required method "render"`
-        });
-    }
-
-    if (layerObject.renderingMode &&
-        layerObject.renderingMode !== '2d' &&
-        layerObject.renderingMode !== '3d') {
-        errors.push({
-            message: `layers.${id}: property "renderingMode" must be either "2d" or "3d"`
-        });
-    }
-
-    return errors;
-}
-
-class CustomStyleLayer extends StyleLayer {
-
-    implementation: CustomLayerInterface;
-
-    constructor(implementation: CustomLayerInterface) {
-        super(implementation, {});
-        this.implementation = implementation;
-    }
-
-    is3D() {
-        return this.implementation.renderingMode === '3d';
-    }
-
-    hasOffscreenPass() {
-        return this.implementation.prerender !== undefined;
-    }
-
-    recalculate() {}
-    updateTransitions() {}
-    hasTransition() {}
-
-    serialize() {
-        assert(false, "Custom layers cannot be serialized");
-    }
-
-    onAdd(map: Map) {
-        if (this.implementation.onAdd) {
-            this.implementation.onAdd(map, map.painter.context.gl);
-        }
-    }
-
-    onRemove(map: Map) {
-        if (this.implementation.onRemove) {
-            this.implementation.onRemove(map, map.painter.context.gl);
-        }
-    }
-}
-
-export default CustomStyleLayer;