Deckgl: extensions and playground

.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
   stories: [
     '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
     '../src/exercises/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/playground/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   staticDirs: ['../public'],
   addons: [

src/exercises/deckGL/02.stories.tsx

@@ -22,6 +22,7 @@ import Legend from 'components/map/legend';
 import LegendItem from 'components/map/legend/item/component';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
 import { CustomMapProps } from 'components/map/types';
+import BIIExtension from 'extensions/bii';
 import { BREAKPOINTS } from 'styles/styles.config';
 
 import PAUSE_SVG from 'svgs/ui/pause.svg?sprite';
@@ -207,6 +208,9 @@ const Template: Story<CustomMapProps> = (args: CustomMapProps) => {
               zoom: z,
               visible,
               opacity,
+              uMinColor: [0.37, 0.55, 0.36],
+              uMaxColor: [0.88, 0.94, 0.88],
+              extensions: [new BIIExtension()],
             });
           }
           return null;

src/extensions/bii/index.tsx

@@ -0,0 +1,60 @@
+import { Layer, LayerExtension } from '@deck.gl/core/typed';
+
+class BIIExtension extends LayerExtension {
+  getShaders() {
+    return {
+      inject: {
+        'fs:#decl': /*glsl*/ `
+          uniform vec3 uMinColor;
+          uniform vec3 uMaxColor;
+        `,
+        'fs:#main-end': /*glsl*/ `
+          float l = length(bitmapColor);
+          float lmin = length(vec4(uMinColor, 1.0));
+          float lmax = length(vec4(uMaxColor, 1.0));
+
+          float f = (l - lmin) / (lmax - lmin);
+
+          // float r = bitmapColor.r;
+          // float g = bitmapColor.g;
+          // float b = bitmapColor.b;
+
+          // float minr = uMinColor.r;
+          // float ming = uMinColor.g;
+          // float minb = uMinColor.b;
+
+          // float maxr = uMaxColor.r;
+          // float maxg = uMaxColor.g;
+          // float maxb = uMaxColor.b;
+
+          // float r1 = (r - minr) / (maxr - minr);
+          // float g1 = (g - ming) / (maxg - ming);
+          // float b1 = (b - minb) / (maxb - minb);
+
+          // float o = (r1 + g1 + b1) / 3.0;
+
+          vec4 color = mix(bitmapColor, vec4(bitmapColor.rgb, 0.0), f);
+
+          gl_FragColor = vec4(color.rgb, color.a * opacity);
+          gl_FragColor = bitmapColor;
+        `,
+      },
+    };
+  }
+
+  updateState(this: Layer, params: any) {
+    const { props } = params;
+    const { uMinColor, uMaxColor } = props;
+
+    // console.log(this, params);
+
+    for (const model of this.getModels()) {
+      model.setUniforms({
+        uMinColor,
+        uMaxColor,
+      });
+    }
+  }
+}
+
+export default BIIExtension;

src/playground/extensions/brushing-circles-source.stories.tsx

@@ -0,0 +1,102 @@
+import { useMemo, useState } from 'react';
+
+import { BrushingExtension } from '@deck.gl/extensions';
+import { GeoJsonLayer } from '@deck.gl/layers';
+import { MapboxLayer } from '@deck.gl/mapbox';
+//
+import { Story } from '@storybook/react/types-6-0';
+import PluginMapboxGl from '@vizzuality/layer-manager-plugin-mapboxgl';
+import { Layer, LayerManager } from '@vizzuality/layer-manager-react';
+
+import Map from 'components/map';
+import Controls from 'components/map/controls';
+import ZoomControl from 'components/map/controls/zoom';
+import { CustomMapProps } from 'components/map/types';
+//
+import AIRPORTS_DATA from 'data/airports.json';
+
+const StoryMap = {
+  title: 'Playground/DeckGL/Extensions',
+  component: Map,
+  argTypes: {},
+};
+
+export default StoryMap;
+
+const Template: Story<CustomMapProps> = (args: CustomMapProps) => {
+  const { id, bounds, initialViewState } = args;
+
+  const [viewState, setViewState] = useState(initialViewState);
+
+  const RASTER_DECODED_LAYER = useMemo(() => {
+    return [
+      new MapboxLayer({
+        id: 'deck-test-extension-layer',
+        type: GeoJsonLayer,
+        data: AIRPORTS_DATA,
+        stroked: true,
+        filled: true,
+        extruded: true,
+        pointType: 'circle',
+        pointRadiusUnits: 'pixels',
+        lineWidthScale: 20,
+        lineWidthMinPixels: 2,
+        getFillColor: [160, 160, 180, 200],
+        getLineColor: [255, 255, 255],
+        getPointRadius: 8,
+        getLineWidth: 1,
+        getElevation: 30,
+        visible: true,
+        opacity: 1,
+        extensions: [new BrushingExtension()],
+        brushingRadius: 1000000,
+      }),
+    ];
+  }, []);
+
+  return (
+    <>
+      <div className="relative grow">
+        <Map
+          id={id}
+          bounds={bounds}
+          viewState={viewState}
+          mapboxAccessToken={process.env.STORYBOOK_MAPBOX_API_TOKEN}
+          onMapViewStateChange={(v) => {
+            setViewState(v);
+          }}
+        >
+          {(map) => {
+            return (
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer id="deck-test-extension-layer" type="deck" deck={RASTER_DECODED_LAYER} />
+                </LayerManager>
+                <Controls>
+                  <ZoomControl id={id} />
+                </Controls>
+              </>
+            );
+          }}
+        </Map>
+      </div>
+    </>
+  );
+};
+
+export const BrushingCirclesSource = Template.bind({});
+BrushingCirclesSource.args = {
+  id: 'mask',
+  className: '',
+  viewport: {},
+  initialViewState: {},
+  onMapViewportChange: (viewport) => {
+    console.info('onMapViewportChange: ', viewport);
+  },
+  onMapReady: ({ map, mapContainer }) => {
+    console.info('onMapReady: ', map, mapContainer);
+  },
+  onMapLoad: ({ map, mapContainer }) => {
+    console.info('onMapLoad: ', map, mapContainer);
+  },
+};

src/playground/extensions/brushing-polygons-source.stories.tsx

@@ -0,0 +1,105 @@
+import { useMemo, useState } from 'react';
+
+import { BrushingExtension } from '@deck.gl/extensions';
+import { GeoJsonLayer } from '@deck.gl/layers';
+import { MapboxLayer } from '@deck.gl/mapbox';
+//
+import { Story } from '@storybook/react/types-6-0';
+import PluginMapboxGl from '@vizzuality/layer-manager-plugin-mapboxgl';
+import { Layer, LayerManager } from '@vizzuality/layer-manager-react';
+
+import Map from 'components/map';
+import Controls from 'components/map/controls';
+import ZoomControl from 'components/map/controls/zoom';
+import { CustomMapProps } from 'components/map/types';
+//
+import PROVINCES_DATA from 'data/provinces.json';
+
+const StoryMap = {
+  title: 'Playground/DeckGL/Extensions',
+  component: Map,
+  argTypes: {},
+};
+
+export default StoryMap;
+
+const Template: Story<CustomMapProps> = (args: CustomMapProps) => {
+  const { id, bounds, initialViewState } = args;
+
+  const [viewState, setViewState] = useState(initialViewState);
+
+  const RASTER_DECODED_LAYER = useMemo(() => {
+    return [
+      new MapboxLayer({
+        id: 'deck-test-extension-layer',
+        type: GeoJsonLayer,
+        data: PROVINCES_DATA,
+        stroked: true,
+        filled: true,
+        extruded: true,
+        lineWidthScale: 20,
+        lineWidthMinPixels: 2,
+        getFillColor: [160, 160, 180, 200],
+        getLineColor: [255, 255, 255],
+        getLineWidth: 1,
+        getElevation: 30,
+        visible: true,
+        opacity: 1,
+        extensions: [new BrushingExtension()],
+        brushingRadius: 100000,
+      }),
+    ];
+  }, []);
+
+  return (
+    <>
+      <div className="relative grow">
+        <Map
+          id={id}
+          bounds={bounds}
+          viewState={viewState}
+          initialViewState={initialViewState}
+          mapboxAccessToken={process.env.STORYBOOK_MAPBOX_API_TOKEN}
+          onMapViewStateChange={(v) => {
+            setViewState(v);
+          }}
+        >
+          {(map) => {
+            return (
+              <>
+                <LayerManager map={map} plugin={PluginMapboxGl}>
+                  <Layer id="deck-test-extension-layer" type="deck" deck={RASTER_DECODED_LAYER} />
+                </LayerManager>
+                <Controls>
+                  <ZoomControl id={id} />
+                </Controls>
+              </>
+            );
+          }}
+        </Map>
+      </div>
+    </>
+  );
+};
+
+export const BrushingPolygonsSource = Template.bind({});
+BrushingPolygonsSource.args = {
+  id: 'mask',
+  className: '',
+  viewport: {},
+  initialViewState: {
+    bounds: [-13.392736, 35.469583, 7.701014, 43.460862],
+    fitBoundsOptions: {
+      padding: 50,
+    },
+  },
+  onMapViewportChange: (viewport) => {
+    console.info('onMapViewportChange: ', viewport);
+  },
+  onMapReady: ({ map, mapContainer }) => {
+    console.info('onMapReady: ', map, mapContainer);
+  },
+  onMapLoad: ({ map, mapContainer }) => {
+    console.info('onMapLoad: ', map, mapContainer);
+  },
+};

src/exercises/deckGL/extensions/02.stories.tsx → src/playground/extensions/highlight-raster.stories.tsx

@@ -16,7 +16,7 @@ import { CustomMapProps } from 'components/map/types';
 import HighlightExtension from 'extensions/highlight';
 
 const StoryMap = {
-  title: 'Exercises/DeckGL/Extensions',
+  title: 'Playground/DeckGL/Extensions',
   component: Map,
   argTypes: {},
 };
@@ -89,12 +89,6 @@ const Template: Story<CustomMapProps> = (args: CustomMapProps) => {
 
   return (
     <>
-      <div className="prose">
-        <h2>Raster tiles</h2>
-        <p>Draw a raster layer with this url source: </p>
-        <pre>{`https://earthengine.google.org/static/hansen_2013/gain_alpha/{z}/{x}/{y}.png`}</pre>
-      </div>
-
       <div className="relative grow">
         <Map
           id={id}
@@ -125,8 +119,8 @@ const Template: Story<CustomMapProps> = (args: CustomMapProps) => {
   );
 };
 
-export const Extensions02 = Template.bind({});
-Extensions02.args = {
+export const HighlightRaster = Template.bind({});
+HighlightRaster.args = {
   id: 'raster',
   className: '',
   viewport: {},

src/exercises/deckGL/extensions/01.stories.tsx → src/playground/extensions/test.stories.tsx

@@ -16,7 +16,7 @@ import { CustomMapProps } from 'components/map/types';
 import TestExtension from 'extensions/test';
 
 const StoryMap = {
-  title: 'Exercises/DeckGL/Extensions',
+  title: 'Playground/DeckGL/Extensions',
   component: Map,
   argTypes: {},
 };
@@ -72,12 +72,6 @@ const Template: Story<CustomMapProps> = (args: CustomMapProps) => {
 
   return (
     <>
-      <div className="prose">
-        <h2>Raster tiles</h2>
-        <p>Draw a raster layer with this url source: </p>
-        <pre>{`https://earthengine.google.org/static/hansen_2013/gain_alpha/{z}/{x}/{y}.png`}</pre>
-      </div>
-
       <div className="relative grow">
         <Map
           id={id}
@@ -106,8 +100,8 @@ const Template: Story<CustomMapProps> = (args: CustomMapProps) => {
   );
 };
 
-export const Extensions01 = Template.bind({});
-Extensions01.args = {
+export const Test = Template.bind({});
+Test.args = {
   id: 'raster',
   className: '',
   viewport: {},