Upgrade deck.gl to v9.0

Signed-off-by: Florent MILLOT <[email protected]>
powsybl · May 17, 2024 · aea1e73 · aea1e73
1 parent d4bd209
commit aea1e73
Show file tree

Hide file tree

Showing 6 changed files with 2,030 additions and 1,358 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
         "@svgdotjs/svg.panzoom.js": "^2.1.2",
         "@turf/boolean-point-in-polygon": "^6.5.0",
         "cheap-ruler": "^3.0.2",
-        "deck.gl": "^8.9.35",
+        "deck.gl": "^9.0.14",
         "geolib": "^3.3.4",
         "mapbox-gl": "^3.2.0",
         "maplibre-gl": "^4.1.2",
@@ -59,12 +59,13 @@
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/jest": "^29.5.12",
         "@types/license-checker": "^25.0.6",
-        "@types/mapbox-gl": "^3.1.0",
         "@types/mapbox__mapbox-gl-draw": "^1.4.6",
+        "@types/mapbox-gl": "^3.1.0",
         "@types/node": "^18.19.31",
         "@types/react": "^18.2.75",
         "@types/react-dom": "^18.2.24",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
+        "@typescript-eslint/parser": "^6.21.0",
         "@vitejs/plugin-react": "^4.2.1",
         "babel-jest": "^29.7.0",
         "eslint": "^7.32.0",

diff --git a/src/components/network-map-viewer/network/layers/arrow-layer.js b/src/components/network-map-viewer/network/layers/arrow-layer.js
@@ -5,15 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { Layer, project32, picking } from '@deck.gl/core';
-import GL from '@luma.gl/constants';
-import {
-    Model,
-    Geometry,
-    Texture2D,
-    FEATURES,
-    hasFeatures,
-    isWebGL2,
-} from '@luma.gl/core';
+import { GL } from '@luma.gl/constants';
+import { Model, Geometry } from '@luma.gl/engine';
 
 import vs from './arrow-layer-vertex.glsl';
 import fs from './arrow-layer-fragment.glsl';
@@ -76,17 +69,16 @@ export class ArrowLayer extends Layer {
         return attributes;
     }
 
-    initializeState() {
-        const { gl } = this.context;
+    initializeState(context) {
+        const { device } = context;
 
-        if (!hasFeatures(gl, [FEATURES.TEXTURE_FLOAT])) {
+        if (!device.features.has('texture-blend-float-webgl')) {
             throw new Error('Arrow layer not supported on this browser');
         }
 
-        const maxTextureSize = gl.getParameter(GL.MAX_TEXTURE_SIZE);
+        const maxTextureSize = device.getParametersWebGL(GL.MAX_TEXTURE_SIZE);
         this.state = {
             maxTextureSize,
-            webgl2: isWebGL2(gl),
         };
 
         this.getAttributeManager().addInstanced({
@@ -114,7 +106,7 @@ export class ArrowLayer extends Layer {
                 size: 1,
                 transition: true,
                 accessor: 'getDistance',
-                type: GL.FLOAT,
+                type: 'float32',
                 defaultValue: 0,
             },
             instanceArrowDirection: {
@@ -181,13 +173,13 @@ export class ArrowLayer extends Layer {
         });
     }
 
-    finalizeState() {
-        super.finalizeState();
+    finalizeState(context) {
+        super.finalizeState(context);
         // we do not use setState to avoid a redraw, it is just used to stop the animation
         this.state.stop = true;
     }
 
-    createTexture2D(gl, data, elementSize, format, dataFormat) {
+    createTexture2D(device, data, elementSize, format, dataFormat) {
         const start = performance.now();
 
         // we calculate the smallest square texture that is a power of 2 but less or equals to MAX_TEXTURE_SIZE
@@ -210,7 +202,7 @@ export class ArrowLayer extends Layer {
             data.fill(0, oldLength, textureSize * textureSize * elementSize);
         }
 
-        const texture2d = new Texture2D(gl, {
+        const texture2d = device.createTexture({
             width: textureSize,
             height: textureSize,
             format: format,
@@ -303,7 +295,7 @@ export class ArrowLayer extends Layer {
                     changeFlags.updateTriggersChanged.getLinePositions));
 
         if (geometryChanged) {
-            const { gl } = this.context;
+            const { device } = this.context;
 
             const {
                 linePositionsTextureData,
@@ -312,14 +304,14 @@ export class ArrowLayer extends Layer {
             } = this.createTexturesStructure(props);
 
             const linePositionsTexture = this.createTexture2D(
-                gl,
+                device,
                 linePositionsTextureData,
                 2,
                 this.state.webgl2 ? GL.RG32F : GL.LUMINANCE_ALPHA,
                 this.state.webgl2 ? GL.RG : GL.LUMINANCE_ALPHA
             );
             const lineDistancesTexture = this.createTexture2D(
-                gl,
+                device,
                 lineDistancesTextureData,
                 1,
                 this.state.webgl2 ? GL.R32F : GL.LUMINANCE,
@@ -339,16 +331,16 @@ export class ArrowLayer extends Layer {
     }
 
     updateModel({ changeFlags }) {
-        if (changeFlags.extensionsChanged) {
-            const { gl } = this.context;
+        if (changeFlags.somethingChanged) {
+            const { device } = this.context;
 
             const { model } = this.state;
             if (model) {
                 model.delete();
             }
 
             this.setState({
-                model: this._getModel(gl),
+                model: this._getModel(device),
             });
 
             this.getAttributeManager().invalidateAll();
@@ -392,47 +384,47 @@ export class ArrowLayer extends Layer {
         const { sizeMinPixels, sizeMaxPixels } = this.props;
 
         const {
+            model,
             linePositionsTexture,
             lineDistancesTexture,
             timestamp,
             webgl2,
         } = this.state;
 
-        this.state.model
-            .setUniforms(uniforms)
-            .setUniforms({
-                sizeMinPixels,
-                sizeMaxPixels,
-                linePositionsTexture,
-                lineDistancesTexture,
-                linePositionsTextureSize: [
-                    linePositionsTexture.width,
-                    linePositionsTexture.height,
-                ],
-                lineDistancesTextureSize: [
-                    lineDistancesTexture.width,
-                    lineDistancesTexture.height,
-                ],
-                timestamp,
-                webgl2,
-                distanceBetweenLines: this.props.getDistanceBetweenLines,
-                maxParallelOffset: this.props.maxParallelOffset,
-                minParallelOffset: this.props.minParallelOffset,
-            })
-            .draw();
+        model.setUniforms({
+            ...uniforms,
+            sizeMinPixels,
+            sizeMaxPixels,
+            linePositionsTexture,
+            lineDistancesTexture,
+            linePositionsTextureSize: [
+                linePositionsTexture.width,
+                linePositionsTexture.height,
+            ],
+            lineDistancesTextureSize: [
+                lineDistancesTexture.width,
+                lineDistancesTexture.height,
+            ],
+            timestamp,
+            webgl2,
+            distanceBetweenLines: this.props.getDistanceBetweenLines,
+            maxParallelOffset: this.props.maxParallelOffset,
+            minParallelOffset: this.props.minParallelOffset,
+        });
+        model.draw();
     }
 
-    _getModel(gl) {
+    _getModel(device) {
         const positions = [
             -1, -1, 0, 0, 1, 0, 0, -0.6, 0, 1, -1, 0, 0, 1, 0, 0, -0.6, 0,
         ];
 
         return new Model(
-            gl,
+            device,
             Object.assign(this.getShaders(), {
                 id: this.props.id,
                 geometry: new Geometry({
-                    drawMode: GL.TRIANGLES,
+                    topology: 'triangle-list',
                     vertexCount: 6,
                     attributes: {
                         positions: {

diff --git a/src/components/network-map-viewer/network/layers/fork-line-layer.js b/src/components/network-map-viewer/network/layers/fork-line-layer.js
@@ -6,7 +6,6 @@
  */
 
 import { LineLayer } from 'deck.gl';
-import GL from '@luma.gl/constants';
 
 const defaultProps = {
     getLineParallelIndex: { type: 'accessor', value: 0 },
@@ -71,29 +70,29 @@ uniform float minSubstationRadiusPixel;
         return shaders;
     }
 
-    initializeState(params) {
-        super.initializeState(params);
+    initializeState() {
+        super.initializeState();
 
         const attributeManager = this.getAttributeManager();
         attributeManager.addInstanced({
             instanceLineParallelIndex: {
                 size: 1,
-                type: GL.FLOAT,
+                type: 'float32',
                 accessor: 'getLineParallelIndex',
             },
             instanceLineAngle: {
                 size: 1,
-                type: GL.FLOAT,
+                type: 'float32',
                 accessor: 'getLineAngle',
             },
             instanceOffsetStart: {
                 size: 1,
-                type: GL.FLOAT,
+                type: 'float32',
                 accessor: 'getSubstationOffset',
             },
             instanceProximityFactor: {
                 size: 1,
-                type: GL.FLOAT,
+                type: 'float32',
                 accessor: 'getProximityFactor',
             },
         });

diff --git a/src/components/network-map-viewer/network/layers/parallel-path-layer.js b/src/components/network-map-viewer/network/layers/parallel-path-layer.js
@@ -5,7 +5,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { PathLayer } from 'deck.gl';
-import GL from '@luma.gl/constants';
 
 const defaultProps = {
     getLineParallelIndex: { type: 'accessor', value: 0 },
@@ -101,15 +100,15 @@ gl_Position += project_common_position_to_clipspace(trans) - project_uCenter;
         return shaders;
     }
 
-    initializeState(params) {
-        super.initializeState(params);
+    initializeState() {
+        super.initializeState();
 
         const attributeManager = this.getAttributeManager();
         attributeManager.addInstanced({
             // too much instances variables need to compact some...
             instanceExtraAttributes: {
                 size: 4,
-                type: GL.FLOAT,
+                type: 'float32',
                 accessor: 'getExtraAttributes',
             },
         });

diff --git a/src/components/network-map-viewer/network/layers/scatterplot-layer-ext.js b/src/components/network-map-viewer/network/layers/scatterplot-layer-ext.js
@@ -5,7 +5,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { ScatterplotLayer } from 'deck.gl';
-import GL from '@luma.gl/constants';
 
 const defaultProps = {
     getRadiusMaxPixels: { type: 'accessor', value: 1 },
@@ -30,16 +29,16 @@ attribute float instanceRadiusMaxPixels;
         });
     }
 
-    initializeState(params) {
-        super.initializeState(params);
+    initializeState() {
+        super.initializeState();
 
         const attributeManager = this.getAttributeManager();
         attributeManager.addInstanced({
             instanceRadiusMaxPixels: {
                 size: 1,
                 transition: true,
                 accessor: 'getRadiusMaxPixels',
-                type: GL.FLOAT,
+                type: 'float32',
                 defaultValue: 0,
             },
         });