8181096077

Committed 07 Mar 2024 12:52AM UTC coverage: 73.679% (-0.01%) from 73.691%

Build # 8181096077

Build Type

Pull #8548

github

Committed by

web-flow

Commit Message

Merge abf2fac00 into e76b1c48e

Pull Request Pull Request #8548: fix(core) warn and error when WebGL1 detected

Run Details

3675 of 4372 branches covered (84.06%)

Branch coverage included in aggregate %.

2 of 17 new or added lines in 3 files covered. (11.76%)

18 existing lines in 2 files now uncovered.

41751 of 57282 relevant lines covered (72.89%)

308.43 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

59.87

/modules/mapbox/src/mapbox-overlay.ts

import {Deck, assert} from '@deck.gl/core';
import {getViewState, getDeckInstance, removeDeckInstance, getInterleavedProps} from './deck-utils';

import type {Map, IControl, MapMouseEvent} from 'mapbox-gl';
import type {MjolnirGestureEvent, MjolnirPointerEvent} from 'mjolnir.js';
import type {DeckProps} from '@deck.gl/core';
import {log} from '@deck.gl/core';

import {resolveLayers} from './resolve-layers';

export type MapboxOverlayProps = Omit<
  DeckProps,
  | 'width'
  | 'height'
  | 'gl'
  | 'parent'
  | 'canvas'
  | '_customRender'
  | 'viewState'
  | 'initialViewState'
  | 'controller'
> & {
  interleaved?: boolean;
};

/**
 * 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 implements IControl {
  private _props: MapboxOverlayProps;
  private _deck?: Deck;
  private _map?: Map;
  private _container?: HTMLDivElement;
  private _interleaved: boolean;
  private _lastMouseDownPoint?: {x: number; y: number; clientX: number; clientY: number};

  constructor(props: MapboxOverlayProps) {
    const {interleaved = false, ...otherProps} = props;
    this._interleaved = interleaved;
    this._props = otherProps;
  }

  /** Update (partial) props of the underlying Deck instance. */
  setProps(props: MapboxOverlayProps): void {
    if (this._interleaved && props.layers) {
      resolveLayers(this._map, this._deck, this._props.layers, props.layers);
    }

    Object.assign(this._props, props);

    if (this._deck) {
      this._deck.setProps(this._interleaved ? getInterleavedProps(this._props) : this._props);
    }
  }

  /** Called when the control is added to a map */
  onAdd(map: Map): HTMLDivElement {
    this._map = map;
    return this._interleaved ? this._onAddInterleaved(map) : this._onAddOverlaid(map);
  }

  private _onAddOverlaid(map: Map): HTMLDivElement {
    /* global document */
    const container = document.createElement('div');
    Object.assign(container.style, {
      position: 'absolute',
      left: 0,
      top: 0,
      textAlign: 'initial',
      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('mousedown', this._handleMouseEvent);
    map.on('dragstart', this._handleMouseEvent);
    map.on('drag', this._handleMouseEvent);
    map.on('dragend', this._handleMouseEvent);
    map.on('mousemove', this._handleMouseEvent);
    map.on('mouseout', this._handleMouseEvent);
    map.on('click', this._handleMouseEvent);
    map.on('dblclick', this._handleMouseEvent);

    this._updateContainerSize();
    return container;
  }

  private _onAddInterleaved(map: Map): HTMLDivElement {
    // @ts-ignore non-public map property
    const gl = map.painter.context.gl;
    if (gl instanceof WebGLRenderingContext) {
      log.warn(
        'Incompatible basemap library. See: https://deck.gl/docs/api-reference/mapbox/overview#compatibility'
      )();
      return document.createElement('div');
    }
    this._deck = getDeckInstance({
      map,
      gl,
      deck: new Deck({
        ...this._props,
        gl
      })
    });

    map.on('styledata', this._handleStyleChange);
    resolveLayers(map, this._deck, [], this._props.layers);

    return document.createElement('div');
  }

  /** Called when the control is removed from a map */
  onRemove(): void {
    const map = this._map;

    if (map) {
      if (this._interleaved) {
        this._onRemoveInterleaved(map);
      } else {
        this._onRemoveOverlaid(map);
      }
    }

    this._deck = undefined;
    this._map = undefined;
    this._container = undefined;
  }

  private _onRemoveOverlaid(map: Map): void {
    map.off('resize', this._updateContainerSize);
    map.off('render', this._updateViewState);
    map.off('mousedown', this._handleMouseEvent);
    map.off('dragstart', this._handleMouseEvent);
    map.off('drag', this._handleMouseEvent);
    map.off('dragend', this._handleMouseEvent);
    map.off('mousemove', this._handleMouseEvent);
    map.off('mouseout', this._handleMouseEvent);
    map.off('click', this._handleMouseEvent);
    map.off('dblclick', this._handleMouseEvent);
    this._deck?.finalize();
  }

  private _onRemoveInterleaved(map: Map): void {
    map.off('styledata', this._handleStyleChange);
    resolveLayers(map, this._deck, this._props.layers, []);
    removeDeckInstance(map);
  }

  getDefaultPosition() {
    return 'top-left';
  }

  /** Forwards the Deck.pickObject method */
  pickObject(params: Parameters<Deck['pickObject']>[0]): ReturnType<Deck['pickObject']> {
    assert(this._deck);
    return this._deck.pickObject(params);
  }

  /** Forwards the Deck.pickMultipleObjects method */
  pickMultipleObjects(
    params: Parameters<Deck['pickMultipleObjects']>[0]
  ): ReturnType<Deck['pickMultipleObjects']> {
    assert(this._deck);
    return this._deck.pickMultipleObjects(params);
  }

  /** Forwards the Deck.pickObjects method */
  pickObjects(params: Parameters<Deck['pickObjects']>[0]): ReturnType<Deck['pickObjects']> {
    assert(this._deck);
    return this._deck.pickObjects(params);
  }

  /** Remove from map and releases all resources */
  finalize() {
    if (this._map) {
      this._map.removeControl(this);
    }
  }

  /** If interleaved: true, returns base map's canvas, otherwise forwards the Deck.getCanvas method. */
  getCanvas(): HTMLCanvasElement | null {
    if (!this._map) {
      return null;
    }
    return this._interleaved ? this._map.getCanvas() : this._deck!.getCanvas();
  }

  private _handleStyleChange = () => {
    resolveLayers(this._map, this._deck, this._props.layers, this._props.layers);
  };

  private _updateContainerSize = () => {
    if (this._map && this._container) {
      const {clientWidth, clientHeight} = this._map.getContainer();
      Object.assign(this._container.style, {
        width: `${clientWidth}px`,
        height: `${clientHeight}px`
      });
    }
  };

  private _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
      if (deck.isInitialized) {
        deck.redraw();
      }
    }
  };

  // eslint-disable-next-line complexity
  private _handleMouseEvent = (event: MapMouseEvent) => {
    const deck = this._deck;
    if (!deck || !deck.isInitialized) {
      return;
    }

    const mockEvent: {
      type: string;
      deltaX?: number;
      deltaY?: number;
      offsetCenter: {x: number; y: number};
      srcEvent: MapMouseEvent;
      tapCount?: number;
    } = {
      type: event.type,
      offsetCenter: event.point,
      srcEvent: event
    };

    const lastDown = this._lastMouseDownPoint;
    if (!event.point && lastDown) {
      // drag* events do not contain a `point` field
      mockEvent.deltaX = event.originalEvent.clientX - lastDown.clientX;
      mockEvent.deltaY = event.originalEvent.clientY - lastDown.clientY;
      mockEvent.offsetCenter = {
        x: lastDown.x + mockEvent.deltaX,
        y: lastDown.y + mockEvent.deltaY
      };
    }

    switch (mockEvent.type) {
      case 'mousedown':
        deck._onPointerDown(mockEvent as MjolnirGestureEvent);
        this._lastMouseDownPoint = {
          ...event.point,
          clientX: event.originalEvent.clientX,
          clientY: event.originalEvent.clientY
        };
        break;

      case 'dragstart':
        mockEvent.type = 'panstart';
        deck._onEvent(mockEvent as MjolnirGestureEvent);
        break;

      case 'drag':
        mockEvent.type = 'panmove';
        deck._onEvent(mockEvent as MjolnirGestureEvent);
        break;

      case 'dragend':
        mockEvent.type = 'panend';
        deck._onEvent(mockEvent as MjolnirGestureEvent);
        break;

      case 'click':
        mockEvent.tapCount = 1;
        deck._onEvent(mockEvent as MjolnirGestureEvent);
        break;

      case 'dblclick':
        mockEvent.type = 'click';
        mockEvent.tapCount = 2;
        deck._onEvent(mockEvent as MjolnirGestureEvent);
        break;

      case 'mousemove':
        mockEvent.type = 'pointermove';
        deck._onPointerMove(mockEvent as MjolnirPointerEvent);
        break;

      case 'mouseout':
        mockEvent.type = 'pointerleave';
        deck._onPointerMove(mockEvent as MjolnirPointerEvent);
        break;

      default:
        return;
    }
  };
}

1	import {Deck, assert} from '@deck.gl/core';	1✔
2	import {getViewState, getDeckInstance, removeDeckInstance, getInterleavedProps} from './deck-utils';	1✔
3		1✔
4	import type {Map, IControl, MapMouseEvent} from 'mapbox-gl';	1✔
5	import type {MjolnirGestureEvent, MjolnirPointerEvent} from 'mjolnir.js';	1✔
6	import type {DeckProps} from '@deck.gl/core';	1✔
7	import {log} from '@deck.gl/core';	1✔
8		1✔
9	import {resolveLayers} from './resolve-layers';	1✔
10		1✔
11	export type MapboxOverlayProps = Omit<	1✔
12	DeckProps,	1✔
13	\| 'width'	1✔
14	\| 'height'	1✔
15	\| 'gl'	1✔
16	\| 'parent'	1✔
17	\| 'canvas'	1✔
18	\| '_customRender'	1✔
19	\| 'viewState'	1✔
20	\| 'initialViewState'	1✔
21	\| 'controller'	1✔
22	> & {	1✔
23	interleaved?: boolean;	1✔
24	};	1✔
25		1✔
26	/**	1✔
27	* Implements Mapbox [IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol) interface	1✔
28	* Renders deck.gl layers over the base map and automatically synchronizes with the map's camera	1✔
29	*/	1✔
30	export default class MapboxOverlay implements IControl {	1✔
31	private _props: MapboxOverlayProps;	1✔
32	private _deck?: Deck;	1✔
33	private _map?: Map;	1✔
34	private _container?: HTMLDivElement;	1✔
35	private _interleaved: boolean;	1✔
36	private _lastMouseDownPoint?: {x: number; y: number; clientX: number; clientY: number};	1✔
37		1✔
38	constructor(props: MapboxOverlayProps) {	1✔
39	const {interleaved = false, ...otherProps} = props;	×
40	this._interleaved = interleaved;	×
41	this._props = otherProps;	×
42	}	×
43		1✔
44	/** Update (partial) props of the underlying Deck instance. */	1✔
45	setProps(props: MapboxOverlayProps): void {	1✔
46	if (this._interleaved && props.layers) {	×
47	resolveLayers(this._map, this._deck, this._props.layers, props.layers);	×
48	}	×
49		×
50	Object.assign(this._props, props);	×
51		×
52	if (this._deck) {	×
53	this._deck.setProps(this._interleaved ? getInterleavedProps(this._props) : this._props);	×
54	}	×
55	}	×
56		1✔
57	/** Called when the control is added to a map */	1✔
58	onAdd(map: Map): HTMLDivElement {	1✔
59	this._map = map;	×
60	return this._interleaved ? this._onAddInterleaved(map) : this._onAddOverlaid(map);	×
61	}	×
62		1✔
63	private _onAddOverlaid(map: Map): HTMLDivElement {	1✔
64	/* global document */	×
65	const container = document.createElement('div');	×
66	Object.assign(container.style, {	×
67	position: 'absolute',	×
68	left: 0,	×
69	top: 0,	×
70	textAlign: 'initial',	×
71	pointerEvents: 'none'	×
72	});	×
73	this._container = container;	×
74		×
75	this._deck = new Deck({	×
76	...this._props,	×
77	parent: container,	×
78	viewState: getViewState(map)	×
79	});	×
80		×
81	map.on('resize', this._updateContainerSize);	×
82	map.on('render', this._updateViewState);	×
83	map.on('mousedown', this._handleMouseEvent);	×
84	map.on('dragstart', this._handleMouseEvent);	×
85	map.on('drag', this._handleMouseEvent);	×
86	map.on('dragend', this._handleMouseEvent);	×
87	map.on('mousemove', this._handleMouseEvent);	×
88	map.on('mouseout', this._handleMouseEvent);	×
89	map.on('click', this._handleMouseEvent);	×
90	map.on('dblclick', this._handleMouseEvent);	×
91		×
92	this._updateContainerSize();	×
93	return container;	×
94	}	×
95		1✔
96	private _onAddInterleaved(map: Map): HTMLDivElement {	1✔
NEW 97	// @ts-ignore non-public map property	×
NEW 98	const gl = map.painter.context.gl;	×
NEW 99	if (gl instanceof WebGLRenderingContext) {	×
NEW 100	log.warn(	×
NEW 101	'Incompatible basemap library. See: https://deck.gl/docs/api-reference/mapbox/overview#compatibility'	×
NEW 102	)();	×
NEW 103	return document.createElement('div');	×
NEW 104	}	×
105	this._deck = getDeckInstance({	×
106	map,	×
NEW 107	gl,	×
108	deck: new Deck({	×
109	...this._props,	×
NEW 110	gl	×
111	})	×
112	});	×
113		×
114	map.on('styledata', this._handleStyleChange);	×
115	resolveLayers(map, this._deck, [], this._props.layers);	×
116		×
117	return document.createElement('div');	×
UNCOV 118	}	×
119		1✔
120	/** Called when the control is removed from a map */	1✔
121	onRemove(): void {	1✔
122	const map = this._map;	×
123		×
124	if (map) {	×
125	if (this._interleaved) {	×
126	this._onRemoveInterleaved(map);	×
127	} else {	×
128	this._onRemoveOverlaid(map);	×
129	}	×
130	}	×
131		×
132	this._deck = undefined;	×
133	this._map = undefined;	×
134	this._container = undefined;	×
UNCOV 135	}	×
136		1✔
137	private _onRemoveOverlaid(map: Map): void {	1✔
138	map.off('resize', this._updateContainerSize);	×
139	map.off('render', this._updateViewState);	×
140	map.off('mousedown', this._handleMouseEvent);	×
141	map.off('dragstart', this._handleMouseEvent);	×
142	map.off('drag', this._handleMouseEvent);	×
143	map.off('dragend', this._handleMouseEvent);	×
144	map.off('mousemove', this._handleMouseEvent);	×
145	map.off('mouseout', this._handleMouseEvent);	×
146	map.off('click', this._handleMouseEvent);	×
147	map.off('dblclick', this._handleMouseEvent);	×
148	this._deck?.finalize();	×
UNCOV 149	}	×
150		1✔
151	private _onRemoveInterleaved(map: Map): void {	1✔
152	map.off('styledata', this._handleStyleChange);	×
153	resolveLayers(map, this._deck, this._props.layers, []);	×
154	removeDeckInstance(map);	×
UNCOV 155	}	×
156		1✔
157	getDefaultPosition() {	1✔
158	return 'top-left';	×
UNCOV 159	}	×
160		1✔
161	/** Forwards the Deck.pickObject method */	1✔
162	pickObject(params: Parameters<Deck['pickObject']>[0]): ReturnType<Deck['pickObject']> {	1✔
163	assert(this._deck);	×
164	return this._deck.pickObject(params);	×
UNCOV 165	}	×
166		1✔
167	/** Forwards the Deck.pickMultipleObjects method */	1✔
168	pickMultipleObjects(	1✔
169	params: Parameters<Deck['pickMultipleObjects']>[0]	×
170	): ReturnType<Deck['pickMultipleObjects']> {	×
171	assert(this._deck);	×
172	return this._deck.pickMultipleObjects(params);	×
UNCOV 173	}	×
174		1✔
175	/** Forwards the Deck.pickObjects method */	1✔
176	pickObjects(params: Parameters<Deck['pickObjects']>[0]): ReturnType<Deck['pickObjects']> {	1✔
177	assert(this._deck);	×
178	return this._deck.pickObjects(params);	×
UNCOV 179	}	×
180		1✔
181	/** Remove from map and releases all resources */	1✔
182	finalize() {	1✔
183	if (this._map) {	×
184	this._map.removeControl(this);	×
185	}	×
UNCOV 186	}	×
187		1✔
188	/** If interleaved: true, returns base map's canvas, otherwise forwards the Deck.getCanvas method. */	1✔
189	getCanvas(): HTMLCanvasElement \| null {	1✔
190	if (!this._map) {	×
191	return null;	×
192	}	×
193	return this._interleaved ? this._map.getCanvas() : this._deck!.getCanvas();	×
UNCOV 194	}	×
195		1✔
196	private _handleStyleChange = () => {	1✔
197	resolveLayers(this._map, this._deck, this._props.layers, this._props.layers);	1✔
198	};	1✔
199		1✔
200	private _updateContainerSize = () => {	1✔
201	if (this._map && this._container) {	1✔
202	const {clientWidth, clientHeight} = this._map.getContainer();	1✔
203	Object.assign(this._container.style, {	1✔
204	width: `${clientWidth}px`,	1✔
205	height: `${clientHeight}px`	1✔
206	});	1✔
207	}	1✔
208	};	1✔
209		1✔
210	private _updateViewState = () => {	1✔
211	const deck = this._deck;	1✔
212	if (deck) {	1✔
213	// @ts-ignore (2345) map is always defined if deck is	1✔
214	deck.setProps({viewState: getViewState(this._map)});	1✔
215	// Redraw immediately if view state has changed	1✔
216	if (deck.isInitialized) {	1✔
217	deck.redraw();	1✔
218	}	1✔
219	}	1✔
220	};	1✔
221		1✔
222	// eslint-disable-next-line complexity	1✔
223	private _handleMouseEvent = (event: MapMouseEvent) => {	1✔
224	const deck = this._deck;	1✔
225	if (!deck \|\| !deck.isInitialized) {	1✔
226	return;	1✔
227	}	1✔
228		1✔
229	const mockEvent: {	1✔
230	type: string;	1✔
231	deltaX?: number;	1✔
232	deltaY?: number;	1✔
233	offsetCenter: {x: number; y: number};	1✔
234	srcEvent: MapMouseEvent;	1✔
235	tapCount?: number;	1✔
236	} = {	1✔
237	type: event.type,	1✔
238	offsetCenter: event.point,	1✔
239	srcEvent: event	1✔
240	};	1✔
241		1✔
242	const lastDown = this._lastMouseDownPoint;	1✔
243	if (!event.point && lastDown) {	1✔
244	// drag* events do not contain a `point` field	1✔
245	mockEvent.deltaX = event.originalEvent.clientX - lastDown.clientX;	1✔
246	mockEvent.deltaY = event.originalEvent.clientY - lastDown.clientY;	1✔
247	mockEvent.offsetCenter = {	1✔
248	x: lastDown.x + mockEvent.deltaX,	1✔
249	y: lastDown.y + mockEvent.deltaY	1✔
250	};	1✔
251	}	1✔
252		1✔
253	switch (mockEvent.type) {	1✔
254	case 'mousedown':	1✔
255	deck._onPointerDown(mockEvent as MjolnirGestureEvent);	1✔
256	this._lastMouseDownPoint = {	1✔
257	...event.point,	1✔
258	clientX: event.originalEvent.clientX,	1✔
259	clientY: event.originalEvent.clientY	1✔
260	};	1✔
261	break;	1✔
262		1✔
263	case 'dragstart':	1✔
264	mockEvent.type = 'panstart';	1✔
265	deck._onEvent(mockEvent as MjolnirGestureEvent);	1✔
266	break;	1✔
267		1✔
268	case 'drag':	1✔
269	mockEvent.type = 'panmove';	1✔
270	deck._onEvent(mockEvent as MjolnirGestureEvent);	1✔
271	break;	1✔
272		1✔
273	case 'dragend':	1✔
274	mockEvent.type = 'panend';	1✔
275	deck._onEvent(mockEvent as MjolnirGestureEvent);	1✔
276	break;	1✔
277		1✔
278	case 'click':	1✔
279	mockEvent.tapCount = 1;	1✔
280	deck._onEvent(mockEvent as MjolnirGestureEvent);	1✔
281	break;	1✔
282		1✔
283	case 'dblclick':	1✔
284	mockEvent.type = 'click';	1✔
285	mockEvent.tapCount = 2;	1✔
286	deck._onEvent(mockEvent as MjolnirGestureEvent);	1✔
287	break;	1✔
288		1✔
289	case 'mousemove':	1✔
290	mockEvent.type = 'pointermove';	1✔
291	deck._onPointerMove(mockEvent as MjolnirPointerEvent);	1✔
292	break;	1✔
293		1✔
294	case 'mouseout':	1✔
295	mockEvent.type = 'pointerleave';	1✔
296	deck._onPointerMove(mockEvent as MjolnirPointerEvent);	1✔
297	break;	1✔
298		1✔
299	default:	1✔
300	return;	1✔
301	}	1✔
302	};	1✔
303	}	1✔

visgl / deck.gl / 8181096077

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous