Merge branch 'master' into felix/carto-line-poly-labels

Author: felixpalmer

docs/api-reference/layers/text-layer.md

@@ -198,6 +198,16 @@ If `true`, the text always faces camera. Otherwise the text faces up (z).
 
 Whether to render background for the text blocks.
 
+#### `backgroundBorderRadius` (number | number[4], optional) {#backgroundBorderRadius}
+
+- Default `0`
+
+The border-radius of the background, a number or an array of 4 numbers.
+
++ If a number is supplied, it is the same border radius in pixel for all corners.
++ If an array of 4 is supplied, it is interpreted as `[bottom_right_corner, top_right_corner, bottom_left_corner, top_left_corner]` border radius in pixel.
+
+
 #### `backgroundPadding` (number[4], optional) {#backgroundpadding}
 
 - Default `[0, 0, 0, 0]`

examples/experimental/bezier/src/app.jsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {OrthographicView} from '@deck.gl/core';
 import BezierGraphLayer from './bezier-graph-layer';
 

examples/experimental/h3-grid/src/app.jsx

@@ -4,7 +4,7 @@
 
 import React, {useState} from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {MapView} from '@deck.gl/core';
 
 import {Map} from 'react-map-gl/maplibre';

examples/experimental/tfjs/src/layers/spectrogram-layer.ts

@@ -45,6 +45,7 @@ export class SpectrogramLayer extends CompositeLayer<{
       this.props.settings !== params.oldProps.settings ||
       this.props.pickable !== params.oldProps.pickable
     ) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this._computeSpectrogram();
     }
   }

examples/get-started/react/basic/app.jsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL, {GeoJsonLayer, ArcLayer} from 'deck.gl';
+import {DeckGL, GeoJsonLayer, ArcLayer} from 'deck.gl';
 import {CompassWidget} from '@deck.gl/react';
 import '@deck.gl/widgets/stylesheet.css';
 

examples/layer-browser/src/examples/core-layers.js

@@ -391,6 +391,15 @@ const TextLayerExample = {
       onUpdate: (newValue, newSettings, change) => {
         change('backgroundPadding', [newValue, newValue]);
       }
+    },
+    backgroundBorderRadius: {type: 'compound', elements: ['borderRadius']},
+    borderRadius: {
+      type: 'number',
+      min: 0,
+      max: 100,
+      onUpdate: (newValue, newSettings, change) => {
+        change('backgroundBorderRadius', newValue);
+      }
     }
   },
   props: {

examples/layer-browser/src/map.jsx

@@ -8,7 +8,7 @@ import React, {PureComponent} from 'react';
 import {Map} from 'react-map-gl/maplibre';
 import autobind from 'react-autobind';
 
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {COORDINATE_SYSTEM, View} from '@deck.gl/core';
 
 import LayerInfo from './components/layer-info';

examples/playground/src/deck-with-maplibre.jsx

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import React, {Component} from 'react';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {View} from '@deck.gl/core';
 import maplibregl from 'maplibre-gl';
 

examples/website/360-video/app.tsx

@@ -4,7 +4,7 @@
 
 import React, {useEffect, useState} from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {FirstPersonView, COORDINATE_SYSTEM} from '@deck.gl/core';
 import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
 import {SphereGeometry} from '@luma.gl/engine';
@@ -77,6 +77,7 @@ export default function App() {
     if (isPlaying) {
       video.pause();
     } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       video.play();
     }
     setPlaying(!isPlaying);

examples/website/3d-heatmap/app.tsx

@@ -7,7 +7,7 @@ import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
 import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core';
 import {HexagonLayer} from '@deck.gl/aggregation-layers';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {CSVLoader} from '@loaders.gl/csv';
 import {load} from '@loaders.gl/core';
 

examples/website/3d-tiles/app.tsx

@@ -5,7 +5,7 @@
 import React, {useState} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {Tile3DLayer} from '@deck.gl/geo-layers';
 import {CesiumIonLoader} from '@loaders.gl/3d-tiles';
 

examples/website/arc/app.tsx

@@ -6,7 +6,7 @@
 import React, {useState, useMemo} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
 import {scaleQuantile} from 'd3-scale';
 

examples/website/brushing/app.tsx

@@ -6,7 +6,7 @@
 import React, {useMemo} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {ScatterplotLayer, ArcLayer} from '@deck.gl/layers';
 import {BrushingExtension} from '@deck.gl/extensions';
 import {scaleSqrt} from 'd3-scale';

examples/website/carto-sql/app.tsx

@@ -5,7 +5,7 @@
 import React, {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {LinearInterpolator, PickingInfo} from '@deck.gl/core';
 import {colorBins, H3TileLayer, h3QuerySource} from '@deck.gl/carto';
 import {TooltipContent} from '@deck.gl/core/dist/lib/tooltip';

examples/website/collision-filter/app.tsx

@@ -6,7 +6,7 @@
 import React, {useEffect, useMemo, useState} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {GeoJsonLayer, TextLayer} from '@deck.gl/layers';
 import {CollisionFilterExtension, CollisionFilterExtensionProps} from '@deck.gl/extensions';
 import {calculateLabels, Label} from './calculate-labels';
@@ -44,6 +44,7 @@ export default function App({
   const [roads, setRoads] = useState<FeatureCollection<Geometry, RoadProperties>>();
 
   useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     fetch(DATA_URL)
       .then(resp => resp.json())
       .then(setRoads);

examples/website/contour/app.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {ContourLayer} from '@deck.gl/aggregation-layers';
 
 import type {ContourLayerProps} from '@deck.gl/aggregation-layers';

examples/website/data-filter/app.tsx

@@ -5,7 +5,7 @@
 import React, {useState, useMemo} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {ScatterplotLayer} from '@deck.gl/layers';
 import {DataFilterExtension} from '@deck.gl/extensions';
 import {MapView} from '@deck.gl/core';

examples/website/geojson/app.tsx

@@ -5,7 +5,7 @@
 import React, {useState} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {GeoJsonLayer, PolygonLayer} from '@deck.gl/layers';
 import {LightingEffect, AmbientLight, _SunLight as SunLight} from '@deck.gl/core';
 import {scaleThreshold} from 'd3-scale';

examples/website/globe/app.tsx

@@ -7,7 +7,7 @@ import {useState, useMemo, useCallback} from 'react';
 
 import {createRoot} from 'react-dom/client';
 
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {
   COORDINATE_SYSTEM,
   _GlobeView as GlobeView,

examples/website/google-3d-tiles/app.jsx

@@ -5,7 +5,7 @@
 import React, {useState} from 'react';
 import {scaleLinear} from 'd3-scale';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {Tile3DLayer} from '@deck.gl/geo-layers';
 import {DataFilterExtension, _TerrainExtension as TerrainExtension} from '@deck.gl/extensions';

examples/website/heatmap/app.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {HeatmapLayer} from '@deck.gl/aggregation-layers';
 
 import type {MapViewState} from '@deck.gl/core';

examples/website/highway/app.tsx

@@ -5,7 +5,7 @@
 import React, {useState, useMemo} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {scaleLinear, scaleThreshold} from 'd3-scale';
 import {CSVLoader} from '@loaders.gl/csv';

examples/website/i3s/app.jsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {I3SLoader} from '@loaders.gl/i3s';
 import {Tile3DLayer} from '@deck.gl/geo-layers';
 

examples/website/icon/app.tsx

@@ -5,7 +5,7 @@
 import React, {useState, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {MapView} from '@deck.gl/core';
 import {IconLayer} from '@deck.gl/layers';
 

examples/website/image-tile/app.tsx

@@ -6,7 +6,7 @@
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {OrthographicView} from '@deck.gl/core';
 import {TileLayer} from '@deck.gl/geo-layers';
 import {BitmapLayer} from '@deck.gl/layers';
@@ -71,6 +71,7 @@ export default function App({
         )
       });
     };
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     getMetaData();
   }, []);
 
@@ -97,7 +98,7 @@ export default function App({
         const {width, height} = dimensions;
         const {data, ...otherProps} = props;
         return new BitmapLayer(otherProps, {
-          image: props.data,
+          image: data,
           bounds: [
             clamp(left, 0, width),
             clamp(top, 0, height),

examples/website/line/app.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {LineLayer, ScatterplotLayer} from '@deck.gl/layers';
 
 import type {PickingInfo, MapViewState} from '@deck.gl/core';

examples/website/map-tile/app.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {MapView} from '@deck.gl/core';
 import {TileLayer} from '@deck.gl/geo-layers';
 import {BitmapLayer, PathLayer} from '@deck.gl/layers';

examples/website/mask-extension/app.tsx

@@ -7,7 +7,7 @@ import {useState, useMemo} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
 
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {MaskExtension} from '@deck.gl/extensions';
 

examples/website/mesh/app.jsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {
   COORDINATE_SYSTEM,
   OrbitView,

examples/website/orthographic/app.tsx

@@ -8,7 +8,7 @@ import {createRoot} from 'react-dom/client';
 import {OrthographicView} from '@deck.gl/core';
 import {TextLayer, PathLayer} from '@deck.gl/layers';
 import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {Matrix4} from '@math.gl/core';
 import {scaleLinear} from 'd3-scale';
 import {minIndex, maxIndex} from 'd3-array';

examples/website/plot/app.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {OrbitView, OrbitViewState} from '@deck.gl/core';
 import PlotLayer, {Axes, PlotLayerPickingInfo} from './plot-layer';
 import {scaleLinear} from 'd3-scale';

examples/website/plot/plot-layer/plot-layer.ts

@@ -93,6 +93,7 @@ export default class PlotLayer extends CompositeLayer<Required<_PlotLayerProps>>
     }
   }
 
+  // eslint-disable-next-line max-statements
   getSamples() {
     const {uCount, vCount, getPosition, onAxesChange} = this.props;
     const samples: Vec3[] = new Array(uCount * vCount);

examples/website/point-cloud/app.tsx

@@ -5,7 +5,7 @@
 /* eslint-disable no-unused-vars */
 import React, {useState, useEffect, useCallback} from 'react';
 import {createRoot} from 'react-dom/client';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {OrbitView, LinearInterpolator} from '@deck.gl/core';
 import {PointCloudLayer} from '@deck.gl/layers';
 

examples/website/radio/app.tsx

@@ -9,7 +9,7 @@ import {Map} from 'react-map-gl/maplibre';
 import {MapView, WebMercatorViewport, FlyToInterpolator} from '@deck.gl/core';
 import {ScatterplotLayer, PathLayer} from '@deck.gl/layers';
 import {MVTLayer, H3HexagonLayer} from '@deck.gl/geo-layers';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {load} from '@loaders.gl/core';
 import {CSVLoader} from '@loaders.gl/csv';
 import {scaleSqrt, scaleLinear} from 'd3-scale';

examples/website/scatterplot/app.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {ScatterplotLayer} from '@deck.gl/layers';
 
 import type {Color, MapViewState} from '@deck.gl/core';

examples/website/scenegraph/app.tsx

@@ -6,7 +6,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {ScenegraphLayer} from '@deck.gl/mesh-layers';
 
 import type {ScenegraphLayerProps} from '@deck.gl/mesh-layers';
@@ -120,7 +120,7 @@ export default function App({
 }) {
   const [abortController] = useState<AbortController>(new AbortController());
   const dataRef = useRef<Aircraft[]>([]); // Callback requires stable reference to data.
-  const [_, setVersion] = useState(0); // Re-render on data change.
+  const [, setVersion] = useState(0); // Re-render on data change.
 
   const sync = useCallback(async () => {
     let newData = await fetchData(abortController.signal);

examples/website/screen-grid/app.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
-import DeckGL from '@deck.gl/react';
+import {DeckGL} from '@deck.gl/react';
 import {ScreenGridLayer} from '@deck.gl/aggregation-layers';
 
 import type {Color, MapViewState} from '@deck.gl/core';