Started some adjustments to DeckGL WellPicksLayer

rubenthoms · Nov 7, 2024 · c99a7d2 · c99a7d2
1 parent e4dfcd5
commit c99a7d2
Showing 1 changed file with 36 additions and 17 deletions.
diff --git a/frontend/src/modules/2DViewer/view/customDeckGlLayers/WellborePicksLayer.ts b/frontend/src/modules/2DViewer/view/customDeckGlLayers/WellborePicksLayer.ts
@@ -1,5 +1,4 @@
-import { CompositeLayer, FilterContext } from "@deck.gl/core";
-import { CollisionFilterExtension } from "@deck.gl/extensions";
+import { CompositeLayer, CompositeLayerProps, FilterContext, Layer, UpdateParameters } from "@deck.gl/core";
 import { GeoJsonLayer, TextLayer } from "@deck.gl/layers";
 
 import type { Feature, FeatureCollection } from "geojson";
@@ -25,6 +24,8 @@ export type WellBorePicksLayerProps = {
 
 export class WellborePicksLayer extends CompositeLayer<WellBorePicksLayerProps> {
     static layerName: string = "WellborePicksLayer";
+    private _textData: TextLayerData[] = [];
+    private _pointsData: FeatureCollection | null = null;
 
     filterSubLayer(context: FilterContext): boolean {
         if (context.layer.id.includes("text")) {
@@ -34,8 +35,8 @@ export class WellborePicksLayer extends CompositeLayer<WellBorePicksLayerProps>
         return true;
     }
 
-    renderLayers() {
-        const features: Feature[] = this.props.data.map((wellPick) => {
+    updateState(params: UpdateParameters<Layer<WellBorePicksLayerProps & Required<CompositeLayerProps>>>): void {
+        const features: Feature[] = params.props.data.map((wellPick) => {
             return {
                 type: "Feature",
                 geometry: {
@@ -48,26 +49,40 @@ export class WellborePicksLayer extends CompositeLayer<WellBorePicksLayerProps>
                 },
             };
         });
+
         const pointsData: FeatureCollection = {
             type: "FeatureCollection",
             features: features,
         };
+
         const textData: TextLayerData[] = this.props.data.map((wellPick) => {
             return {
                 coordinates: [wellPick.easting, wellPick.northing, wellPick.tvdMsl],
                 name: wellPick.wellBoreUwi,
             };
         });
 
-        const fontSize = 12;
-        const sizeMinPixels = 12;
-        const sizeMaxPixels = 12;
+        this._pointsData = pointsData;
+        this._textData = textData;
+    }
+
+    shouldUpdateState(
+        params: UpdateParameters<Layer<WellBorePicksLayerProps & Required<CompositeLayerProps>>>
+    ): boolean {
+        // console.debug(params.context.viewport.zoom);
+        return false;
+    }
+
+    renderLayers() {
+        const fontSize = 16;
+        const sizeMinPixels = 16;
+        const sizeMaxPixels = 16;
 
         return [
             new GeoJsonLayer(
                 this.getSubLayerProps({
                     id: "points",
-                    data: pointsData,
+                    data: this._pointsData ?? undefined,
                     // pointType: 'circle+text',
                     filled: true,
                     lineWidthMinPixels: 5,
@@ -82,24 +97,26 @@ export class WellborePicksLayer extends CompositeLayer<WellBorePicksLayerProps>
                     getText: (d: Feature) => d.properties?.wellBoreUwi,
                     getLineColor: [50, 50, 50],
                     // extensions: [new CollisionFilterExtension()],
-                    collisionGroup: "wellbore-picks",
+                    // collisionGroup: "wellbore-picks",
                 })
             ),
 
             new TextLayer(
                 this.getSubLayerProps({
                     id: "text",
-                    data: textData,
-                    depthTest: true,
+                    data: this._textData,
+                    // depthTest: true,
                     pickable: true,
-                    getColor: [0, 0, 0],
+                    getColor: [255, 255, 255],
+                    fontWeight: 800,
                     fontSettings: {
                         fontSize: fontSize * 2,
                         sdf: true,
                     },
-                    outlineColor: [255, 255, 255],
-                    outlineWidth: 3,
-                    getSize: 10,
+                    outlineColor: [0, 0, 0],
+                    outlineWidth: 2,
+                    getSize: 12,
+                    sdf: true,
                     sizeScale: fontSize,
                     sizeUnits: "meters",
                     sizeMinPixels: sizeMinPixels,
@@ -109,14 +126,16 @@ export class WellborePicksLayer extends CompositeLayer<WellBorePicksLayerProps>
                     getPosition: (d: TextLayerData) => d.coordinates,
                     getText: (d: TextLayerData) => d.name,
                     // maxWidth: 64 * 12,
-                    extensions: [new CollisionFilterExtension()],
+                    /*
+                    // extensions: [new CollisionFilterExtension()],
                     collisionGroup: "wellbore-picks",
 
                     collisionTestProps: {
-                        sizeScale: fontSize * 2,
+                        sizeScale: fontSize,
                         sizeMaxPixels: sizeMaxPixels * 2,
                         sizeMinPixels: sizeMinPixels * 2,
                     },
+                    */
                 })
             ),
         ];