Merge branch 'master' into x/icon-manager-fix

docs/api-reference/geo-layers/tile-layer.md

@@ -249,7 +249,7 @@ Note that the following sub layer props are overridden by `TileLayer` internally
 
 ##### `zRange` (Array, optional) {#zrange}
 
-An array representing the height range of the content in the tiles, as `[minZ, maxZ]`. This is designed to support tiles with 2.5D content, such as buildings or terrains. At high pitch angles, such a tile may "extrude into" the viewport even if its 2D bounding box is out of view. Therefore, it is necesary to provide additional information for the layer to behave correctly. The value of this prop is used for two purposes: 1) to determine the necesary tiles to load and/or render; 2) to determine the possible intersecting tiles during picking.
+An array representing the height range of the content in the tiles, as `[minZ, maxZ]`. This is designed to support tiles with 2.5D content, such as buildings or terrains. At high pitch angles, such a tile may "extrude into" the viewport even if its 2D bounding box is out of view. Therefore, it is necessary to provide additional information for the layer to behave correctly. The value of this prop is used for two purposes: 1) to determine the necessary tiles to load and/or render; 2) to determine the possible intersecting tiles during picking.
 
 This prop currently only has effect when used with a geospatial view.
 

docs/developer-guide/animations-and-transitions.md

@@ -45,7 +45,7 @@ Following fields of `viewState` can be used to achieve viewport transitions.
 
 * `transitionDuration` (Number, optional, default: 0) - Transition duration in milliseconds, default value 0, implies no transition.
 * `transitionEasing` (Function, optional, default: `t => t`) - Easing function that can be used to achieve effects like "Ease-In-Cubic", "Ease-Out-Cubic", etc. Default value performs Linear easing. (list of sample easing functions: <http://easings.net/>)
-* `transitionInterpolator` (Object, optional, default: `LinearInterpolator`) - An interpolator object that defines the transition behavior between two viewports, deck.gl provides `LinearInterpolator` and `FlyToInterpolator`. Default value, `LinearInterpolator`, performs linear interpolation on `ViewState` fields. `FlyToInterpolator` animates `ViewStates` similar to MapBox `flyTo` API and applicable for `MapState`, this is pretty useful when camera center changes by long distance. But a user can provide any custom implementation for this object using `TrasitionInterpolator` base class.
+* `transitionInterpolator` (Object, optional, default: `LinearInterpolator`) - An interpolator object that defines the transition behavior between two viewports, deck.gl provides `LinearInterpolator` and `FlyToInterpolator`. Default value, `LinearInterpolator`, performs linear interpolation on `ViewState` fields. `FlyToInterpolator` animates `ViewStates` similar to MapBox `flyTo` API and applicable for `MapState`, this is pretty useful when camera center changes by long distance. But a user can provide any custom implementation for this object using `TransitionInterpolator` base class.
 * `transitionInterruption` (TRANSITION_EVENTS (Number), optional, default: BREAK) - This field controls how to process a new `ViewState` change that occurs while performing an existing transition. This field has no impact once transition is complete. Here is the list of all possible values with resulting behavior.
 
 | TRANSITION_EVENTS | Result |
@@ -131,7 +131,7 @@ class App extends Component {
 }
 ```
 
-Sample code to get continuous rotations along vertical axis until user interrupts by rotating the map by mouse interaction. It uses `LinearInterpolator` and restricts transitions for `bearing` prop. Continuous transitions are achieved by triggering new transitions using `onTranstionEnd` callback.
+Sample code to get continuous rotations along vertical axis until user interrupts by rotating the map by mouse interaction. It uses `LinearInterpolator` and restricts transitions for `bearing` prop. Continuous transitions are achieved by triggering new transitions using `onTransitionEnd` callback.
 
 ```js
 const transitionInterpolator = new LinearInterpolator(['bearing']);

docs/developer-guide/building-apps.md

@@ -47,7 +47,7 @@ So, what bundle size impact should you expect? When do you know if you have set
 
 Notes:
 
-* Numbers represent the bundle size of a minimal application, bundled with Webpack 4, which means that the untransipiled and the ESM distribution results benefit from some tree shaking.
+* Numbers represent the bundle size of a minimal application, bundled with Webpack 4, which means that the untranspiled and the ESM distribution results benefit from some tree shaking.
 * The number in parenthesis is the compressed bundle size. This is how much bigger you might expect your gzipped bundle to get by adding deck.gl as a dependency to your application.
 
 

docs/developer-guide/tips-and-tricks.md

@@ -5,7 +5,7 @@
 
 ### Per Layer Control of GPU parameters
 
-The base `Layer` class (which is inherited by all layers) supports a `parameters` property that allows applications to specify the state of GPU parameters such as blending mode, depth testing etc. This can provide signigicant extra control over rendering.
+The base `Layer` class (which is inherited by all layers) supports a `parameters` property that allows applications to specify the state of GPU parameters such as blending mode, depth testing etc. This can provide significant extra control over rendering.
 
 ```js
 const layer = new ScatterplotLayer({

docs/developer-guide/view-state-transitions.md

@@ -7,7 +7,7 @@ Transitions are supported by adding the following fields when setting `Deck`'s `
 * `transitionDuration` (Number|String, optional, default: 0) - Transition duration in milliseconds, default value 0, implies no transition.
 When using `FlyToInterpolator`, it can also be set to `'auto'` where actual duration is auto calculated based on start and end viewports and is linear to the distance between them. This duration can be further customized using `speed` parameter to `FlyToInterpolator` constructor.
 * `transitionEasing` (Function, optional, default: `t => t`) - Easing function that can be used to achieve effects like "Ease-In-Cubic", "Ease-Out-Cubic", etc. Default value performs Linear easing. (list of sample easing functions: <http://easings.net/>)
-* `transitionInterpolator` (Object, optional, default: `LinearInterpolator`) - An interpolator object that defines the transition behavior between two viewports, deck.gl provides `LinearInterpolator` and `FlyToInterpolator`. Default value, `LinearInterpolator`, performs linear interpolation on view state fields. `FlyToInterpolator` animates `ViewStates` similar to MapBox `flyTo` API and applicable for `MapState`, this is pretty useful when camera center changes by long distance. But a user can provide any custom implementation for this object using `TrasitionInterpolator` base class.    
+* `transitionInterpolator` (Object, optional, default: `LinearInterpolator`) - An interpolator object that defines the transition behavior between two viewports, deck.gl provides `LinearInterpolator` and `FlyToInterpolator`. Default value, `LinearInterpolator`, performs linear interpolation on view state fields. `FlyToInterpolator` animates `ViewStates` similar to MapBox `flyTo` API and applicable for `MapState`, this is pretty useful when camera center changes by long distance. But a user can provide any custom implementation for this object using `TransitionInterpolator` base class.    
 * `transitionInterruption` (Enum, optional, default: `TRANSITION_EVENTS.BREAK`) - This field controls how to process a new view state change that occurs while performing an existing transition. This field has no impact once transition is complete. Here is the list of all possible values with resulting behavior.
 
 | `TRANSITION_EVENTS` | Result |
@@ -66,7 +66,7 @@ function App() {
 }
 ```
 
-Sample code to get continuous rotations along vertical axis until user interrupts by rotating the map by mouse interaction. It uses `LinearInterpolator` and restricts transitions for `bearing` prop. Continuous transitions are achieved by triggering new transitions using `onTranstionEnd` callback.
+Sample code to get continuous rotations along vertical axis until user interrupts by rotating the map by mouse interaction. It uses `LinearInterpolator` and restricts transitions for `bearing` prop. Continuous transitions are achieved by triggering new transitions using `onTransitionEnd` callback.
 
 ```js
 import React, {useState, useCallback} from 'react';

docs/get-started/using-with-react.md

@@ -1,6 +1,6 @@
 # Using deck.gl with React
 
-While not directly based on React, deck.gl is designed from ground up to work with [React](https://facebook.github.io/react/) based applications. deck.gl layers fit naturally into React's component render flow and flux/redux based appications. deck.gl layers will be performantly rerendered whenever you rerender your normal JSX or React components.
+While not directly based on React, deck.gl is designed from ground up to work with [React](https://facebook.github.io/react/) based applications. deck.gl layers fit naturally into React's component render flow and flux/redux based applications. deck.gl layers will be performantly rerendered whenever you rerender your normal JSX or React components.
 
 
 ## The DeckGL React Component
@@ -172,7 +172,7 @@ More examples are discussed in [this issue](https://github.com/visgl/deck.gl/iss
   but could be rendered as a child of any React component that you want to
   overlay your layers on top of.
 
-* To achive the overlay effect, the `DeckGL` component creates a transparent
+* To achieve the overlay effect, the `DeckGL` component creates a transparent
   `canvas` DOM element, into which the deck.gl layers passed in the `layers`
   prop will render (using WebGL2/WebGPU). Since this canvas is transparent, any
   other component you have underneath (typically a map) will visible behind

docs/upgrade-guide.md

@@ -97,6 +97,15 @@ const layer = new CartoLayer({
 });
 ```
 
+### loaders.gl
+
+loaders.gl dependencies are updated to v4. Although most version differences are handled internal to deck.gl, some changes may be required for applications that work directly with loaders:
+
+- If an application imports `@loaders.gl/*` sub packages to load specific data formats, they should be upgraded from v3.x to v4.x.
+- If the layer prop `dataTransform` is used to pre-process data, the loaded data object might have changed. For example, `CSVLoader` now yields [a new table format](https://loaders.gl/docs/specifications/category-table). 
+- For a complete list of breaking changes and improvements, see [loaders.gl 4.0 upgrade guide](https://loaders.gl/docs/upgrade-guide#upgrading-to-v40).
+
+
 ## Upgrading from deck.gl v8.8 to v8.9
 
 #### Breaking changes

examples/playground/package.json

@@ -14,7 +14,7 @@
     "@loaders.gl/csv": "^4.2.0-alpha.5",
     "@loaders.gl/draco": "^4.2.0-alpha.5",
     "@loaders.gl/gltf": "^4.2.0-alpha.5",
-    "@luma.gl/constants": "^9.0.3",
+    "@luma.gl/constants": "^9.0.4",
     "brace": "^0.11.1",
     "deck.gl": "^8.8.0",
     "maplibre-gl": "^3.0.0",

modules/aggregation-layers/package.json

@@ -38,16 +38,16 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "^9.0.3",
-    "@luma.gl/shadertools": "^9.0.3",
+    "@luma.gl/constants": "^9.0.4",
+    "@luma.gl/shadertools": "^9.0.4",
     "@math.gl/web-mercator": "^4.0.0",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.0.0-beta",
     "@deck.gl/layers": "^9.0.0-beta",
-    "@luma.gl/core": "^9.0.3",
-    "@luma.gl/engine": "^9.0.3"
+    "@luma.gl/core": "^9.0.4",
+    "@luma.gl/engine": "^9.0.4"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

modules/arcgis/package.json

@@ -36,15 +36,15 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "^9.0.3",
-    "@luma.gl/webgl": "^9.0.3",
+    "@luma.gl/constants": "^9.0.4",
+    "@luma.gl/webgl": "^9.0.4",
     "esri-loader": "^3.3.0"
   },
   "peerDependencies": {
     "@arcgis/core": "^4.0.0",
     "@deck.gl/core": "^9.0.0-beta",
-    "@luma.gl/core": "^9.0.3",
-    "@luma.gl/engine": "^9.0.3"
+    "@luma.gl/core": "^9.0.4",
+    "@luma.gl/engine": "^9.0.4"
   },
   "devDependencies": {
     "@arcgis/core": "^4.21.0"

modules/carto/package.json

@@ -47,7 +47,7 @@
     "@loaders.gl/mvt": "^4.2.0-alpha.5",
     "@loaders.gl/schema": "^4.2.0-alpha.5",
     "@loaders.gl/tiles": "^4.2.0-alpha.5",
-    "@luma.gl/constants": "^9.0.3",
+    "@luma.gl/constants": "^9.0.4",
     "@math.gl/web-mercator": "^4.0.0",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",
@@ -70,7 +70,7 @@
     "@deck.gl/geo-layers": "^9.0.0-beta",
     "@deck.gl/layers": "^9.0.0-beta",
     "@loaders.gl/core": "^4.2.0-alpha.5",
-    "@luma.gl/core": "^9.0.3"
+    "@luma.gl/core": "^9.0.4"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

modules/core/package.json

@@ -42,11 +42,11 @@
   "dependencies": {
     "@loaders.gl/core": "^4.2.0-alpha.5",
     "@loaders.gl/images": "^4.2.0-alpha.5",
-    "@luma.gl/constants": "^9.0.3",
-    "@luma.gl/core": "^9.0.3",
-    "@luma.gl/engine": "^9.0.3",
-    "@luma.gl/shadertools": "^9.0.3",
-    "@luma.gl/webgl": "^9.0.3",
+    "@luma.gl/constants": "^9.0.4",
+    "@luma.gl/core": "^9.0.4",
+    "@luma.gl/engine": "^9.0.4",
+    "@luma.gl/shadertools": "^9.0.4",
+    "@luma.gl/webgl": "^9.0.4",
     "@math.gl/core": "^4.0.0",
     "@math.gl/sun": "^4.0.0",
     "@math.gl/web-mercator": "^4.0.0",

modules/core/src/lifecycle/prop-types.ts

@@ -4,6 +4,7 @@ import {deepEqual} from '../utils/deep-equal';
 import type Component from './component';
 import type {Color, TextureSource} from '../types/layer-props';
 import type Layer from '../lib/layer';
+import type {SamplerProps} from '@luma.gl/core';
 
 type BasePropType<ValueT> = {
   value: ValueT;
@@ -83,7 +84,7 @@ type DataPropType<T = any> = BasePropType<T> & {
 };
 type ImagePropType = BasePropType<TextureSource | null> & {
   type: 'image';
-  parameters?: Record<number, number>;
+  parameters?: SamplerProps;
 };
 type ObjectPropType<T = any> = BasePropType<T> & {
   type: 'object';
@@ -192,8 +193,22 @@ const TYPE_DEFINITIONS = {
   },
   data: {
     transform: (value, propType: DataPropType, component) => {
+      if (!value) {
+        return value;
+      }
       const {dataTransform} = component.props;
-      return dataTransform && value ? dataTransform(value) : value;
+      if (dataTransform) {
+        return dataTransform(value);
+      }
+      // Detect loaders.gl v4 table format
+      if (
+        typeof value.shape === 'string' &&
+        value.shape.endsWith('-table') &&
+        Array.isArray(value.data)
+      ) {
+        return value.data;
+      }
+      return value;
     }
   },
   image: {

modules/extensions/package.json

@@ -38,14 +38,14 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "^9.0.3",
-    "@luma.gl/shadertools": "^9.0.3",
+    "@luma.gl/constants": "^9.0.4",
+    "@luma.gl/shadertools": "^9.0.4",
     "@math.gl/core": "^4.0.0"
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.0.0-beta",
-    "@luma.gl/core": "^9.0.3",
-    "@luma.gl/engine": "^9.0.3"
+    "@luma.gl/core": "^9.0.4",
+    "@luma.gl/engine": "^9.0.4"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

modules/extensions/src/fill-style/fill-style-extension.ts

@@ -5,21 +5,24 @@ import {patternShaders} from './shader-module';
 import type {
   Layer,
   LayerContext,
+  DefaultProps,
   Accessor,
   AccessorFunction,
   TextureSource,
   UpdateParameters
 } from '@deck.gl/core';
 import type {Texture} from '@luma.gl/core';
 
-const defaultProps = {
+const defaultProps: DefaultProps<FillStyleExtensionProps> = {
   fillPatternEnabled: true,
   fillPatternAtlas: {
     type: 'image',
     value: null,
     async: true,
     parameters: {
-      minFilter: 'linear'
+      // Override default mipmap filter 'linear', i.e. set MIN_FILTER to LINEAR instead of LINEAR_MIPMAP_LINEAR
+      // @ts-expect-error invalid value for type `SamplerProps` - luma.gl should allow unset
+      mipmapFilter: ''
     }
   },
   fillPatternMapping: {type: 'object', value: {}, async: true},

modules/geo-layers/package.json

@@ -46,8 +46,8 @@
     "@loaders.gl/terrain": "^4.2.0-alpha.5",
     "@loaders.gl/tiles": "^4.2.0-alpha.5",
     "@loaders.gl/wms": "^4.2.0-alpha.5",
-    "@luma.gl/gltf": "^9.0.3",
-    "@luma.gl/shadertools": "^9.0.3",
+    "@luma.gl/gltf": "^9.0.4",
+    "@luma.gl/shadertools": "^9.0.4",
     "@math.gl/core": "^4.0.0",
     "@math.gl/culling": "^4.0.0",
     "@math.gl/web-mercator": "^4.0.0",
@@ -61,8 +61,8 @@
     "@deck.gl/layers": "^9.0.0-beta",
     "@deck.gl/mesh-layers": "^9.0.0-beta",
     "@loaders.gl/core": "^4.2.0-alpha.5",
-    "@luma.gl/core": "^9.0.3",
-    "@luma.gl/engine": "^9.0.3"
+    "@luma.gl/core": "^9.0.4",
+    "@luma.gl/engine": "^9.0.4"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

modules/google-maps/package.json

@@ -38,13 +38,13 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "^9.0.3",
+    "@luma.gl/constants": "^9.0.4",
     "@math.gl/core": "^4.0.0",
     "@types/google.maps": "^3.48.6"
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.0.0-beta",
-    "@luma.gl/core": "^9.0.3"
+    "@luma.gl/core": "^9.0.4"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

modules/jupyter-widget/package.json

@@ -39,7 +39,7 @@
     "@loaders.gl/3d-tiles": "^4.2.0-alpha.5",
     "@loaders.gl/core": "^4.2.0-alpha.5",
     "@loaders.gl/csv": "^4.2.0-alpha.5",
-    "@luma.gl/core": "^9.0.3",
+    "@luma.gl/core": "^9.0.4",
     "d3-dsv": "^1.0.8",
     "mapbox-gl": "^1.13.2"
   },

modules/layers/package.json

@@ -48,8 +48,8 @@
   "peerDependencies": {
     "@deck.gl/core": "^9.0.0-beta",
     "@loaders.gl/core": "^4.2.0-alpha.5",
-    "@luma.gl/core": "^9.0.3",
-    "@luma.gl/engine": "^9.0.3"
+    "@luma.gl/core": "^9.0.4",
+    "@luma.gl/engine": "^9.0.4"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }

modules/layers/src/solid-polygon-layer/solid-polygon-layer-vertex-main.glsl.ts

@@ -49,7 +49,7 @@ vec3 project_offset_normal(vec3 vector) {
 void calculatePosition(PolygonProps props) {
   vec3 pos = props.positions;
   vec3 pos64Low = props.positions64Low;
-  vec3 normal;
+  vec3 normal = props.normal;
   vec4 colors = isWireframe ? props.lineColors : props.fillColors;
 
   geometry.worldPosition = props.positions;
@@ -63,7 +63,12 @@ void calculatePosition(PolygonProps props) {
   DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
 
   if (extruded) {
-    geometry.normal = props.normal;
+  #ifdef IS_SIDE_VERTEX
+    normal = project_offset_normal(normal);
+  #else
+    normal = project_normal(normal);
+  #endif
+    geometry.normal = normal;
     vec3 lightColor = lighting_getLightColor(colors.rgb, project_uCameraPosition, geometry.position.xyz, geometry.normal);
     vColor = vec4(lightColor, colors.a * opacity);
   } else {

modules/layers/src/solid-polygon-layer/solid-polygon-layer-vertex-side.glsl.ts

@@ -23,6 +23,7 @@ import main from './solid-polygon-layer-vertex-main.glsl';
 export default `\
 #version 300 es
 #define SHADER_NAME solid-polygon-layer-vertex-shader-side
+#define IS_SIDE_VERTEX
 
 in vec2 positions;
 
@@ -66,11 +67,10 @@ void main(void) {
   props.positions = mix(pos, nextPos, positions.x);
   props.positions64Low = mix(pos64Low, nextPos64Low, positions.x);
 
-  vec3 normal = vec3(
+  props.normal = vec3(
     pos.y - nextPos.y + (pos64Low.y - nextPos64Low.y),
     nextPos.x - pos.x + (nextPos64Low.x - pos64Low.x),
     0.0);
-  props.normal = project_offset_normal(normal);
 
   props.elevations = instanceElevations * positions.y;
   props.fillColors = instanceFillColors;

modules/layers/src/solid-polygon-layer/solid-polygon-layer-vertex-top.glsl.ts

@@ -42,7 +42,7 @@ void main(void) {
   props.fillColors = fillColors;
   props.lineColors = lineColors;
   props.pickingColors = pickingColors;
-  props.normal = project_normal(vec3(0.0, 0.0, 1.0));
+  props.normal = vec3(0.0, 0.0, 1.0);
 
   calculatePosition(props);
 }

modules/mapbox/package.json

@@ -38,12 +38,12 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "^9.0.3",
+    "@luma.gl/constants": "^9.0.4",
     "@math.gl/web-mercator": "^4.0.0"
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.0.0-beta",
-    "@luma.gl/core": "^9.0.3"
+    "@luma.gl/core": "^9.0.4"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }