8380976013

Committed 21 Mar 2024 07:56PM UTC coverage: 89.028% (-0.01%) from 89.039%

Build # 8380976013

Build Type

push

github

Committed by

web-flow

Commit Message

fix(core): base map creation error in DeckGL scripting interface (#8691)

Run Details

6059 of 6744 branches covered (89.84%)

Branch coverage included in aggregate %.

0 of 2 new or added lines in 1 file covered. (0.0%)

8 existing lines in 1 file now uncovered.

51005 of 57353 relevant lines covered (88.93%)

3614.35 hits per line

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

32.17

/modules/core/src/scripting/map-wrapper.ts

import type {MapViewState} from '../views/map-view';

export type MapProps = {
  /** mapboxgl, maplibregl, or compatible library */
  mapLib: {
    Map: any;
    accessToken?: string;
  };
  container: HTMLElement;
  mapStyle?: string;
  mapboxApiAccessToken?: string;
  /** Directly passed to Map class constructor */
  mapOptions?: any;
  width: number;
  height: number;
  viewState: MapViewState;
};

/** A small wrapper that turns mapbox-gl or maplibre-gl Map into a stateless component
 */
export class MapWrapper {
  constructor(props: MapProps) {
    this.props = {...props};
    this._initialize(this.props);
  }

  private props: MapProps;
  private map: any = null;
  private width: number = 0;
  private height: number = 0;

  finalize() {
    this.map?.remove();
    this.map = null;
  }

  setProps(props: Partial<MapProps>) {
    const oldProps = this.props;
    const newProps = {...this.props, ...props};
    this.props = newProps;

    if (!this.map) {
      return;
    }

    const needsRedraw = this._update(oldProps, newProps);

    if (needsRedraw) {
      this.redraw();
    }
  }

  // Force redraw the map now. Typically resize() and jumpTo() is reflected in the next
  // render cycle, which is managed by Mapbox's animation loop.
  // This removes the synchronization issue caused by requestAnimationFrame.
  redraw() {
    const map = this.map;
    // map._render will throw error if style does not exist
    // https://github.com/mapbox/mapbox-gl-js/blob/fb9fc316da14e99ff4368f3e4faa3888fb43c513
    //   /src/ui/map.js#L1834
    if (map.style) {
      // cancel the scheduled update
      if (map._frame) {
        map._frame.cancel();
        map._frame = null;
      }
      // the order is important - render() may schedule another update
      map._render();
    }
  }

  // External apps can access map this way
  getMap() {
    return this.map;
  }

  private _initialize(props: MapProps) {
    const {mapLib, container} = props;

    // Creation only props
    mapLib.accessToken = props.mapboxApiAccessToken || '';

    this.map = new props.mapLib.Map({
      container,
      maxZoom: 24,
      ...props.mapOptions,
      ...viewStateToMapboxProps(props.viewState),
      style: props.mapStyle,
      interactive: false,
      trackResize: false
    });

    // Hijack dimension properties
    // This eliminates the timing issue between calling resize() and DOM update
    /* eslint-disable accessor-pairs */
    Object.defineProperty(container, 'offsetWidth', {get: () => this.width});
    Object.defineProperty(container, 'clientWidth', {get: () => this.width});
    Object.defineProperty(container, 'offsetHeight', {
      get: () => this.height
    });
    Object.defineProperty(container, 'clientHeight', {
      get: () => this.height
    });
    this.map.resize();
  }

  private _update(oldProps: MapProps, newProps: MapProps) {
    const styleChanged = oldProps.mapStyle !== newProps.mapStyle;
    if (styleChanged) {
      this.map.setStyle(newProps.mapStyle);
    }

    const sizeChanged = oldProps.width !== newProps.width || oldProps.height !== newProps.height;
    if (sizeChanged) {
      this.width = newProps.width;
      this.height = newProps.height;
      this.map.resize();
    }

    const oldViewState = oldProps.viewState;
    const newViewState = newProps.viewState;
    const viewportChanged =
      newViewState.latitude !== oldViewState.latitude ||
      newViewState.longitude !== oldViewState.longitude ||
      newViewState.zoom !== oldViewState.zoom ||
      newViewState.pitch !== oldViewState.pitch ||
      newViewState.bearing !== oldViewState.bearing;
    if (viewportChanged) {
      this.map.jumpTo(viewStateToMapboxProps(newViewState));
    }
    return sizeChanged || viewportChanged;
  }
}

function viewStateToMapboxProps(viewState: MapViewState) {
  return {
    center: [viewState.longitude, viewState.latitude],
    zoom: viewState.zoom,
    bearing: viewState.bearing ?? 0,
    pitch: viewState.pitch ?? 0
  };
}

1	import type {MapViewState} from '../views/map-view';	1✔
2		1✔
3	export type MapProps = {	1✔
4	/** mapboxgl, maplibregl, or compatible library */	1✔
5	mapLib: {	1✔
6	Map: any;	1✔
7	accessToken?: string;	1✔
8	};	1✔
9	container: HTMLElement;	1✔
10	mapStyle?: string;	1✔
11	mapboxApiAccessToken?: string;	1✔
12	/** Directly passed to Map class constructor */	1✔
13	mapOptions?: any;	1✔
14	width: number;	1✔
15	height: number;	1✔
16	viewState: MapViewState;	1✔
17	};	1✔
18		1✔
19	/** A small wrapper that turns mapbox-gl or maplibre-gl Map into a stateless component	1✔
20	*/	1✔
21	export class MapWrapper {	1✔
22	constructor(props: MapProps) {	1✔
23	this.props = {...props};	×
24	this._initialize(this.props);	×
25	}	×
26		1✔
27	private props: MapProps;	1✔
28	private map: any = null;	1✔
29	private width: number = 0;	1✔
30	private height: number = 0;	1✔
31		1✔
32	finalize() {	1✔
33	this.map?.remove();	×
34	this.map = null;	×
35	}	×
36		1✔
37	setProps(props: Partial<MapProps>) {	1✔
38	const oldProps = this.props;	×
39	const newProps = {...this.props, ...props};	×
40	this.props = newProps;	×
41		×
42	if (!this.map) {	×
43	return;	×
44	}	×
45		×
46	const needsRedraw = this._update(oldProps, newProps);	×
47		×
48	if (needsRedraw) {	×
49	this.redraw();	×
50	}	×
51	}	×
52		1✔
53	// Force redraw the map now. Typically resize() and jumpTo() is reflected in the next	1✔
54	// render cycle, which is managed by Mapbox's animation loop.	1✔
55	// This removes the synchronization issue caused by requestAnimationFrame.	1✔
56	redraw() {	1✔
57	const map = this.map;	×
58	// map._render will throw error if style does not exist	×
59	// https://github.com/mapbox/mapbox-gl-js/blob/fb9fc316da14e99ff4368f3e4faa3888fb43c513	×
60	// /src/ui/map.js#L1834	×
61	if (map.style) {	×
62	// cancel the scheduled update	×
63	if (map._frame) {	×
64	map._frame.cancel();	×
65	map._frame = null;	×
66	}	×
67	// the order is important - render() may schedule another update	×
68	map._render();	×
69	}	×
70	}	×
71		1✔
72	// External apps can access map this way	1✔
73	getMap() {	1✔
74	return this.map;	×
75	}	×
76		1✔
77	private _initialize(props: MapProps) {	1✔
NEW 78	const {mapLib, container} = props;	×
79		×
80	// Creation only props	×
81	mapLib.accessToken = props.mapboxApiAccessToken \|\| '';	×
82		×
83	this.map = new props.mapLib.Map({	×
NEW 84	container,	×
85	maxZoom: 24,	×
86	...props.mapOptions,	×
87	...viewStateToMapboxProps(props.viewState),	×
88	style: props.mapStyle,	×
89	interactive: false,	×
90	trackResize: false	×
91	});	×
92		×
93	// Hijack dimension properties	×
94	// This eliminates the timing issue between calling resize() and DOM update	×
95	/* eslint-disable accessor-pairs */	×
96	Object.defineProperty(container, 'offsetWidth', {get: () => this.width});	×
97	Object.defineProperty(container, 'clientWidth', {get: () => this.width});	×
98	Object.defineProperty(container, 'offsetHeight', {	×
99	get: () => this.height	×
100	});	×
101	Object.defineProperty(container, 'clientHeight', {	×
102	get: () => this.height	×
103	});	×
104	this.map.resize();	×
105	}	×
106		1✔
107	private _update(oldProps: MapProps, newProps: MapProps) {	1✔
108	const styleChanged = oldProps.mapStyle !== newProps.mapStyle;	×
109	if (styleChanged) {	×
110	this.map.setStyle(newProps.mapStyle);	×
111	}	×
112		×
113	const sizeChanged = oldProps.width !== newProps.width \|\| oldProps.height !== newProps.height;	×
114	if (sizeChanged) {	×
115	this.width = newProps.width;	×
116	this.height = newProps.height;	×
117	this.map.resize();	×
118	}	×
119		×
120	const oldViewState = oldProps.viewState;	×
121	const newViewState = newProps.viewState;	×
122	const viewportChanged =	×
123	newViewState.latitude !== oldViewState.latitude \|\|	×
124	newViewState.longitude !== oldViewState.longitude \|\|	×
125	newViewState.zoom !== oldViewState.zoom \|\|	×
126	newViewState.pitch !== oldViewState.pitch \|\|	×
127	newViewState.bearing !== oldViewState.bearing;	×
128	if (viewportChanged) {	×
129	this.map.jumpTo(viewStateToMapboxProps(newViewState));	×
130	}	×
131	return sizeChanged \|\| viewportChanged;	×
132	}	×
133	}	1✔
134		1✔
135	function viewStateToMapboxProps(viewState: MapViewState) {	×
136	return {	×
137	center: [viewState.longitude, viewState.latitude],	×
138	zoom: viewState.zoom,	×
139	bearing: viewState.bearing ?? 0,	×
140	pitch: viewState.pitch ?? 0	×
141	};	×
142	}	×

visgl / deck.gl / 8380976013

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