@deck.gl/mapbox 8.9.10 → 8.9.11

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/mapbox",
   "description": "Use deck.gl layers as custom mapbox-gl-js layers",
   "license": "MIT",
-  "version": "8.9.10",
+  "version": "8.9.11",
   "publishConfig": {
     "access": "public"
   },
@@ -35,5 +35,5 @@
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0"
   },
-  "gitHead": "95b67b17698635f96c9e26562f2d5bac28f96cbf"
+  "gitHead": "ec059b9b2bde01fecc8017ed39b9898d85794561"
 }

package/typed/deck-utils.js

@@ -1,185 +0,0 @@
-import { Deck, WebMercatorViewport, MapView, _flatten as flatten } from '@deck.gl/core';
-export function getDeckInstance({ map, gl, deck }) {
-    // Only create one deck instance per context
-    if (map.__deck) {
-        return map.__deck;
-    }
-    const customRender = deck?.props._customRender;
-    const deckProps = {
-        useDevicePixels: true,
-        _customRender: (reason) => {
-            map.triggerRepaint();
-            // customRender may be subscribed by DeckGL React component to update child props
-            // make sure it is still called
-            customRender?.(reason);
-        },
-        // TODO: import these defaults from a single source of truth
-        parameters: {
-            depthMask: true,
-            depthTest: true,
-            blend: true,
-            blendFunc: [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA],
-            polygonOffsetFill: true,
-            depthFunc: gl.LEQUAL,
-            blendEquation: gl.FUNC_ADD
-        },
-        views: (deck && deck.props.views) || [new MapView({ id: 'mapbox' })]
-    };
-    if (!deck || deck.props.gl === gl) {
-        // deck is using the WebGLContext created by mapbox
-        // block deck from setting the canvas size
-        Object.assign(deckProps, {
-            gl,
-            width: null,
-            height: null,
-            touchAction: 'unset',
-            viewState: getViewState(map)
-        });
-        // If using the WebGLContext created by deck (React use case), we use deck's viewState to drive the map.
-        // Otherwise (pure JS use case), we use the map's viewState to drive deck.
-        map.on('move', () => onMapMove(deck, map));
-    }
-    if (deck) {
-        deck.setProps(deckProps);
-        deck.userData.isExternal = true;
-    }
-    else {
-        deck = new Deck(deckProps);
-        map.on('remove', () => {
-            deck.finalize();
-            map.__deck = null;
-        });
-    }
-    deck.userData.mapboxLayers = new Set();
-    deck.userData.mapboxVersion = getMapboxVersion(map);
-    map.__deck = deck;
-    map.on('render', () => {
-        // @ts-expect-error (2445) protected property
-        if (deck.layerManager)
-            afterRender(deck, map);
-    });
-    return deck;
-}
-export function addLayer(deck, layer) {
-    deck.userData.mapboxLayers.add(layer);
-    updateLayers(deck);
-}
-export function removeLayer(deck, layer) {
-    deck.userData.mapboxLayers.delete(layer);
-    updateLayers(deck);
-}
-export function updateLayer(deck, layer) {
-    updateLayers(deck);
-}
-export function drawLayer(deck, map, layer) {
-    let { currentViewport } = deck.userData;
-    if (!currentViewport) {
-        // This is the first layer drawn in this render cycle.
-        // Generate viewport from the current map state.
-        currentViewport = getViewport(deck, map, true);
-        deck.userData.currentViewport = currentViewport;
-    }
-    // @ts-expect-error (2445) protected property
-    if (!deck.layerManager) {
-        return;
-    }
-    deck._drawLayers('mapbox-repaint', {
-        viewports: [currentViewport],
-        layerFilter: ({ layer: deckLayer }) => layer.id === deckLayer.id,
-        clearCanvas: false
-    });
-}
-export function getViewState(map) {
-    const { lng, lat } = map.getCenter();
-    return {
-        // Longitude returned by getCenter can be outside of [-180, 180] when zooming near the anti meridian
-        // https://github.com/visgl/deck.gl/issues/6894
-        longitude: ((lng + 540) % 360) - 180,
-        latitude: lat,
-        zoom: map.getZoom(),
-        bearing: map.getBearing(),
-        pitch: map.getPitch(),
-        repeat: map.getRenderWorldCopies()
-    };
-}
-function getMapboxVersion(map) {
-    // parse mapbox version string
-    let major = 0;
-    let minor = 0;
-    // @ts-ignore (2339) undefined property
-    const version = map.version;
-    if (version) {
-        [major, minor] = version.split('.').slice(0, 2).map(Number);
-    }
-    return { major, minor };
-}
-function getViewport(deck, map, useMapboxProjection = true) {
-    const { mapboxVersion } = deck.userData;
-    return new WebMercatorViewport(Object.assign({
-        id: 'mapbox',
-        x: 0,
-        y: 0,
-        width: deck.width,
-        height: deck.height
-    }, getViewState(map), useMapboxProjection
-        ? {
-            // match mapbox's projection matrix
-            // A change of near plane was made in 1.3.0
-            // https://github.com/mapbox/mapbox-gl-js/pull/8502
-            nearZMultiplier: (mapboxVersion.major === 1 && mapboxVersion.minor >= 3) || mapboxVersion.major >= 2
-                ? 0.02
-                : 1 / (deck.height || 1)
-        }
-        : {
-            // use deck.gl's own default
-            nearZMultiplier: 0.1
-        }));
-}
-function afterRender(deck, map) {
-    const { mapboxLayers, isExternal } = deck.userData;
-    if (isExternal) {
-        // Draw non-Mapbox layers
-        const mapboxLayerIds = Array.from(mapboxLayers, layer => layer.id);
-        const deckLayers = flatten(deck.props.layers, Boolean);
-        const hasNonMapboxLayers = deckLayers.some(layer => layer && !mapboxLayerIds.includes(layer.id));
-        let viewports = deck.getViewports();
-        const mapboxViewportIdx = viewports.findIndex(vp => vp.id === 'mapbox');
-        const hasNonMapboxViews = viewports.length > 1 || mapboxViewportIdx < 0;
-        if (hasNonMapboxLayers || hasNonMapboxViews) {
-            if (mapboxViewportIdx >= 0) {
-                viewports = viewports.slice();
-                viewports[mapboxViewportIdx] = getViewport(deck, map, false);
-            }
-            deck._drawLayers('mapbox-repaint', {
-                viewports,
-                layerFilter: params => (!deck.props.layerFilter || deck.props.layerFilter(params)) &&
-                    (params.viewport.id !== 'mapbox' || !mapboxLayerIds.includes(params.layer.id)),
-                clearCanvas: false
-            });
-        }
-    }
-    // End of render cycle, clear generated viewport
-    deck.userData.currentViewport = null;
-}
-function onMapMove(deck, map) {
-    deck.setProps({
-        viewState: getViewState(map)
-    });
-    // Camera changed, will trigger a map repaint right after this
-    // Clear any change flag triggered by setting viewState so that deck does not request
-    // a second repaint
-    deck.needsRedraw({ clearRedrawFlags: true });
-}
-function updateLayers(deck) {
-    if (deck.userData.isExternal) {
-        return;
-    }
-    const layers = [];
-    let layerIndex = 0;
-    deck.userData.mapboxLayers.forEach(deckLayer => {
-        const LayerType = deckLayer.props.type;
-        const layer = new LayerType(deckLayer.props, { _offset: layerIndex++ });
-        layers.push(layer);
-    });
-    deck.setProps({ layers });
-}

package/typed/index.js

@@ -1,2 +0,0 @@
-export { default as MapboxLayer } from './mapbox-layer';
-export { default as MapboxOverlay } from './mapbox-overlay';

package/typed/mapbox-layer.js

@@ -1,37 +0,0 @@
-import { getDeckInstance, addLayer, removeLayer, updateLayer, drawLayer } from './deck-utils';
-export default class MapboxLayer {
-    /* eslint-disable no-this-before-super */
-    constructor(props) {
-        if (!props.id) {
-            throw new Error('Layer must have an unique id');
-        }
-        this.id = props.id;
-        this.type = 'custom';
-        this.renderingMode = props.renderingMode || '3d';
-        this.map = null;
-        this.deck = null;
-        this.props = props;
-    }
-    /* Mapbox custom layer methods */
-    onAdd(map, gl) {
-        this.map = map;
-        this.deck = getDeckInstance({ map, gl, deck: this.props.deck });
-        addLayer(this.deck, this);
-    }
-    onRemove() {
-        if (this.deck) {
-            removeLayer(this.deck, this);
-        }
-    }
-    setProps(props) {
-        // id cannot be changed
-        Object.assign(this.props, props, { id: this.id });
-        // safe guard in case setProps is called before onAdd
-        if (this.deck) {
-            updateLayer(this.deck, this);
-        }
-    }
-    render() {
-        drawLayer(this.deck, this.map, this);
-    }
-}

package/typed/mapbox-overlay.js

@@ -1,139 +0,0 @@
-import { Deck, assert } from '@deck.gl/core';
-import { getViewState } from './deck-utils';
-/**
- * Implements Mapbox [IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol) interface
- * Renders deck.gl layers over the base map and automatically synchronizes with the map's camera
- */
-export default class MapboxOverlay {
-    constructor(props) {
-        this._updateContainerSize = () => {
-            if (this._map && this._container) {
-                const { clientWidth, clientHeight } = this._map.getContainer();
-                Object.assign(this._container.style, {
-                    width: `${clientWidth}px`,
-                    height: `${clientHeight}px`
-                });
-            }
-        };
-        this._updateViewState = () => {
-            const deck = this._deck;
-            if (deck) {
-                // @ts-ignore (2345) map is always defined if deck is
-                deck.setProps({ viewState: getViewState(this._map) });
-                // Redraw immediately if view state has changed
-                deck.redraw();
-            }
-        };
-        this._handleMouseEvent = (event) => {
-            const deck = this._deck;
-            if (!deck) {
-                return;
-            }
-            const mockEvent = {
-                type: event.type,
-                offsetCenter: event.point,
-                srcEvent: event
-            };
-            switch (event.type) {
-                case 'click':
-                    mockEvent.tapCount = 1;
-                    // Hack: because we do not listen to pointer down, perform picking now
-                    deck._onPointerDown(mockEvent);
-                    deck._onEvent(mockEvent);
-                    break;
-                case 'dblclick':
-                    mockEvent.type = 'click';
-                    mockEvent.tapCount = 2;
-                    deck._onEvent(mockEvent);
-                    break;
-                case 'mousemove':
-                    mockEvent.type = 'pointermove';
-                    deck._onPointerMove(mockEvent);
-                    break;
-                case 'mouseout':
-                    mockEvent.type = 'pointerleave';
-                    deck._onPointerMove(mockEvent);
-                    break;
-                default:
-                    return;
-            }
-        };
-        this._props = { ...props };
-    }
-    /** Update (partial) props of the underlying Deck instance. */
-    setProps(props) {
-        Object.assign(this._props, props);
-        if ('viewState' in this._props) {
-            delete this._props.viewState;
-        }
-        if (this._deck) {
-            this._deck.setProps(this._props);
-        }
-    }
-    /** Called when the control is added to a map */
-    onAdd(map) {
-        this._map = map;
-        /* global document */
-        const container = document.createElement('div');
-        Object.assign(container.style, {
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            pointerEvents: 'none'
-        });
-        this._container = container;
-        this._deck = new Deck({
-            ...this._props,
-            parent: container,
-            viewState: getViewState(map)
-        });
-        map.on('resize', this._updateContainerSize);
-        map.on('render', this._updateViewState);
-        map.on('mousemove', this._handleMouseEvent);
-        map.on('mouseout', this._handleMouseEvent);
-        map.on('click', this._handleMouseEvent);
-        map.on('dblclick', this._handleMouseEvent);
-        this._updateContainerSize();
-        return container;
-    }
-    /** Called when the control is removed from a map */
-    onRemove() {
-        const map = this._map;
-        if (map) {
-            map.off('resize', this._updateContainerSize);
-            map.off('render', this._updateViewState);
-            map.off('mousemove', this._handleMouseEvent);
-            map.off('mouseout', this._handleMouseEvent);
-            map.off('click', this._handleMouseEvent);
-            map.off('dblclick', this._handleMouseEvent);
-        }
-        this._deck?.finalize();
-        this._deck = undefined;
-        this._map = undefined;
-        this._container = undefined;
-    }
-    getDefaultPosition() {
-        return 'top-left';
-    }
-    /** Forwards the Deck.pickObject method */
-    pickObject(params) {
-        assert(this._deck);
-        return this._deck.pickObject(params);
-    }
-    /** Forwards the Deck.pickMultipleObjects method */
-    pickMultipleObjects(params) {
-        assert(this._deck);
-        return this._deck.pickMultipleObjects(params);
-    }
-    /** Forwards the Deck.pickObjects method */
-    pickObjects(params) {
-        assert(this._deck);
-        return this._deck.pickObjects(params);
-    }
-    /** Remove from map and releases all resources */
-    finalize() {
-        if (this._map) {
-            this._map.removeControl(this);
-        }
-    }
-}