From 613db7f72e5d05941a8172c537ccf10c9ff142e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?= Date: Wed, 23 Nov 2022 09:41:57 +0100 Subject: [PATCH] Deckgl: extensions and playground --- .storybook/main.js | 1 + src/exercises/deckGL/02.stories.tsx | 4 + src/extensions/bii/index.tsx | 60 ++++++++++ .../brushing-circles-source.stories.tsx | 102 +++++++++++++++++ .../brushing-polygons-source.stories.tsx | 105 ++++++++++++++++++ .../extensions/highlight-raster.stories.tsx} | 12 +- .../extensions/test.stories.tsx} | 12 +- 7 files changed, 278 insertions(+), 18 deletions(-) create mode 100644 src/extensions/bii/index.tsx create mode 100644 src/playground/extensions/brushing-circles-source.stories.tsx create mode 100644 src/playground/extensions/brushing-polygons-source.stories.tsx rename src/{exercises/deckGL/extensions/02.stories.tsx => playground/extensions/highlight-raster.stories.tsx} (91%) rename src/{exercises/deckGL/extensions/01.stories.tsx => playground/extensions/test.stories.tsx} (90%) diff --git a/.storybook/main.js b/.storybook/main.js index 8a48265..fcfaa69 100644 --- a/.storybook/main.js +++ b/.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: [ diff --git a/src/exercises/deckGL/02.stories.tsx b/src/exercises/deckGL/02.stories.tsx index 44e1835..e5d0f93 100644 --- a/src/exercises/deckGL/02.stories.tsx +++ b/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 = (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; diff --git a/src/extensions/bii/index.tsx b/src/extensions/bii/index.tsx new file mode 100644 index 0000000..c7f2966 --- /dev/null +++ b/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; diff --git a/src/playground/extensions/brushing-circles-source.stories.tsx b/src/playground/extensions/brushing-circles-source.stories.tsx new file mode 100644 index 0000000..723cd90 --- /dev/null +++ b/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 = (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 ( + <> +
+ { + setViewState(v); + }} + > + {(map) => { + return ( + <> + + + + + + + + ); + }} + +
+ + ); +}; + +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); + }, +}; diff --git a/src/playground/extensions/brushing-polygons-source.stories.tsx b/src/playground/extensions/brushing-polygons-source.stories.tsx new file mode 100644 index 0000000..d226054 --- /dev/null +++ b/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 = (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 ( + <> +
+ { + setViewState(v); + }} + > + {(map) => { + return ( + <> + + + + + + + + ); + }} + +
+ + ); +}; + +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); + }, +}; diff --git a/src/exercises/deckGL/extensions/02.stories.tsx b/src/playground/extensions/highlight-raster.stories.tsx similarity index 91% rename from src/exercises/deckGL/extensions/02.stories.tsx rename to src/playground/extensions/highlight-raster.stories.tsx index af6f28d..55b0de6 100644 --- a/src/exercises/deckGL/extensions/02.stories.tsx +++ b/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 = (args: CustomMapProps) => { return ( <> -
-

Raster tiles

-

Draw a raster layer with this url source:

- 
{`https://earthengine.google.org/static/hansen_2013/gain_alpha/{z}/{x}/{y}.png`}
-
-
= (args: CustomMapProps) => { ); }; -export const Extensions02 = Template.bind({}); -Extensions02.args = { +export const HighlightRaster = Template.bind({}); +HighlightRaster.args = { id: 'raster', className: '', viewport: {}, diff --git a/src/exercises/deckGL/extensions/01.stories.tsx b/src/playground/extensions/test.stories.tsx similarity index 90% rename from src/exercises/deckGL/extensions/01.stories.tsx rename to src/playground/extensions/test.stories.tsx index 47d8559..6c39ba9 100644 --- a/src/exercises/deckGL/extensions/01.stories.tsx +++ b/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 = (args: CustomMapProps) => { return ( <> -
-

Raster tiles

-

Draw a raster layer with this url source:

- 
{`https://earthengine.google.org/static/hansen_2013/gain_alpha/{z}/{x}/{y}.png`}
-
-
= (args: CustomMapProps) => { ); }; -export const Extensions01 = Template.bind({}); -Extensions01.args = { +export const Test = Template.bind({}); +Test.args = { id: 'raster', className: '', viewport: {},