@vitessce/gl 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/deflate.04b04545.mjs +11 -0
  2. package/dist/index.9aaafdeb.mjs +118035 -0
  3. package/dist/index.mjs +33 -0
  4. package/dist/jpeg.060c9bc0.mjs +838 -0
  5. package/dist/lerc.62b02b29.mjs +1933 -0
  6. package/dist/lzw.19cdd4de.mjs +126 -0
  7. package/dist/packbits.03fc75de.mjs +28 -0
  8. package/dist/pako.esm.0e57f323.mjs +3940 -0
  9. package/dist/raw.739ce163.mjs +10 -0
  10. package/dist/webimage.4e868fb9.mjs +30 -0
  11. package/{dist → dist-tsc}/index.js +0 -0
  12. package/package.json +7 -7
  13. package/src/BitmaskLayer.js +165 -0
  14. package/src/HeatmapBitmapLayer.js +144 -0
  15. package/src/HeatmapCompositeTextLayer.js +156 -0
  16. package/src/PaddedExpressionHeatmapBitmapLayer.js +154 -0
  17. package/src/PixelatedBitmapLayer.js +30 -0
  18. package/src/ScaledExpressionExtension/ScaledExpressionExtension.js +117 -0
  19. package/{dist → src}/ScaledExpressionExtension/index.js +1 -0
  20. package/{dist → src}/ScaledExpressionExtension/shader-module.js +7 -4
  21. package/src/SelectionExtension/SelectionExtension.js +34 -0
  22. package/{dist → src}/SelectionExtension/index.js +1 -0
  23. package/{dist → src}/SelectionExtension/shader-module.js +7 -5
  24. package/src/SelectionLayer.js +198 -0
  25. package/{dist → src}/bitmask-layer-shaders.js +2 -0
  26. package/{dist → src}/constants.js +5 -3
  27. package/{dist → src}/deck.js +0 -0
  28. package/src/glsl/README.md +8 -0
  29. package/src/glsl/colormaps.in.glsl +15 -0
  30. package/{dist → src}/glsl/index.js +1 -0
  31. package/{dist → src}/heatmap-bitmap-layer-shaders.js +2 -0
  32. package/{dist → src}/heatmap-constants.js +11 -8
  33. package/src/index.js +33 -0
  34. package/{dist → src}/luma.js +0 -0
  35. package/{dist → src}/padded-expression-heatmap-bitmap-layer-shaders.js +2 -0
  36. package/src/selection-utils.js +109 -0
  37. package/src/viv.js +20 -0
  38. package/dist/BitmaskLayer.js +0 -132
  39. package/dist/HeatmapBitmapLayer.js +0 -123
  40. package/dist/HeatmapCompositeTextLayer.js +0 -129
  41. package/dist/PaddedExpressionHeatmapBitmapLayer.js +0 -129
  42. package/dist/PixelatedBitmapLayer.js +0 -26
  43. package/dist/ScaledExpressionExtension/ScaledExpressionExtension.js +0 -105
  44. package/dist/SelectionExtension/SelectionExtension.js +0 -31
  45. package/dist/SelectionLayer.js +0 -167
  46. package/dist/selection-utils.js +0 -92
  47. package/dist/viv.js +0 -3
@@ -0,0 +1,154 @@
1
+ /* eslint-disable no-underscore-dangle */
2
+ import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous-dependencies
3
+ import { _mergeShaders, project32, picking } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
4
+ import { BitmapLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
5
+ import { Texture2D } from '@luma.gl/core';
6
+ import { PIXELATED_TEXTURE_PARAMETERS, TILE_SIZE, DATA_TEXTURE_SIZE } from './heatmap-constants';
7
+ import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER } from './constants';
8
+ import { vertexShader, fragmentShader } from './padded-expression-heatmap-bitmap-layer-shaders';
9
+
10
+ const defaultProps = {
11
+ image: { type: 'object', value: null, async: true },
12
+ colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
13
+ bounds: { type: 'array', value: [1, 0, 0, 1], compare: true },
14
+ aggSizeX: { type: 'number', value: 8.0, compare: true },
15
+ aggSizeY: { type: 'number', value: 8.0, compare: true },
16
+ colorScaleLo: { type: 'number', value: 0.0, compare: true },
17
+ colorScaleHi: { type: 'number', value: 1.0, compare: true },
18
+ };
19
+
20
+ /**
21
+ * A BitmapLayer that performs aggregation in the fragment shader,
22
+ * and renders its texture from a Uint8Array rather than an ImageData.
23
+ */
24
+ export default class PaddedExpressionHeatmapBitmapLayer extends BitmapLayer {
25
+ /**
26
+ * Copy of getShaders from Layer (grandparent, parent of BitmapLayer).
27
+ * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/core/src/lib/layer.js#L302
28
+ * @param {object} shaders
29
+ * @returns {object} Merged shaders.
30
+ */
31
+ _getShaders(shaders) {
32
+ this.props.extensions.forEach((extension) => {
33
+ // eslint-disable-next-line no-param-reassign
34
+ shaders = _mergeShaders(
35
+ shaders,
36
+ extension.getShaders.call(this, extension),
37
+ );
38
+ });
39
+ return shaders;
40
+ }
41
+
42
+ /**
43
+ * Need to override to provide custom shaders.
44
+ */
45
+ getShaders() {
46
+ const { colormap } = this.props;
47
+ const fragmentShaderWithColormap = GLSL_COLORMAPS.includes(colormap)
48
+ ? fragmentShader.replace(COLORMAP_SHADER_PLACEHOLDER, colormap)
49
+ : fragmentShader.replace(
50
+ COLORMAP_SHADER_PLACEHOLDER,
51
+ GLSL_COLORMAP_DEFAULT,
52
+ );
53
+ return this._getShaders({
54
+ vs: vertexShader,
55
+ fs: fragmentShaderWithColormap,
56
+ modules: [project32, picking],
57
+ });
58
+ }
59
+
60
+ updateState(args) {
61
+ super.updateState(args);
62
+ const { props, oldProps } = args;
63
+ if (props.colormap !== oldProps.colormap) {
64
+ const { gl } = this.context;
65
+ // eslint-disable-next-line no-unused-expressions
66
+ this.state.model?.delete();
67
+ this.state.model = this._getModel(gl);
68
+ this.getAttributeManager().invalidateAll();
69
+ }
70
+ if (props.image !== oldProps.image) {
71
+ this.loadTexture(this.props.image);
72
+ }
73
+ }
74
+
75
+ /**
76
+ * Need to override to provide additional uniform values.
77
+ * Simplified by removing video-related code.
78
+ * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L173
79
+ * @param {*} opts
80
+ */
81
+ draw(opts) {
82
+ const { uniforms } = opts;
83
+ const { bitmapTexture, model } = this.state;
84
+ const {
85
+ aggSizeX,
86
+ aggSizeY,
87
+ colorScaleLo,
88
+ colorScaleHi,
89
+ origDataSize,
90
+ tileI,
91
+ tileJ,
92
+ numXTiles,
93
+ numYTiles,
94
+ } = this.props;
95
+ // Render the image
96
+ if (bitmapTexture && model) {
97
+ model
98
+ .setUniforms(
99
+ Object.assign({}, uniforms, {
100
+ uBitmapTexture: bitmapTexture,
101
+ uOrigDataSize: origDataSize,
102
+ uReshapedDataSize: [DATA_TEXTURE_SIZE, DATA_TEXTURE_SIZE],
103
+ uTextureSize: [TILE_SIZE, TILE_SIZE],
104
+ uAggSize: [aggSizeX, aggSizeY],
105
+ uColorScaleRange: [colorScaleLo, colorScaleHi],
106
+ tileIJ: [tileI, tileJ],
107
+ dataIJ: [0, 0],
108
+ numTiles: [numXTiles, numYTiles],
109
+ numData: [1, 1],
110
+ }),
111
+ )
112
+ .draw();
113
+ }
114
+ }
115
+
116
+ /**
117
+ * Need to override to provide the custom DEFAULT_TEXTURE_PARAMETERS
118
+ * object.
119
+ * Simplified by removing video-related code.
120
+ * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L218
121
+ * @param {Array<Uint8Array>} images
122
+ */
123
+ loadTexture(image) {
124
+ const { gl } = this.context;
125
+
126
+ if (this.state.bitmapTexture) {
127
+ this.state.bitmapTexture.delete();
128
+ }
129
+
130
+ if (image && image instanceof Texture2D) {
131
+ this.setState({
132
+ bitmapTexture: image,
133
+ });
134
+ } else if (image) {
135
+ this.setState({
136
+ bitmapTexture: new Texture2D(gl, {
137
+ data: image,
138
+ mipmaps: false,
139
+ parameters: PIXELATED_TEXTURE_PARAMETERS,
140
+ // Each color contains a single luminance value.
141
+ // When sampled, rgb are all set to this luminance, alpha is 1.0.
142
+ // Reference: https://luma.gl/docs/api-reference/webgl/texture#texture-formats
143
+ format: GL.LUMINANCE,
144
+ dataFormat: GL.LUMINANCE,
145
+ type: GL.UNSIGNED_BYTE,
146
+ width: DATA_TEXTURE_SIZE,
147
+ height: DATA_TEXTURE_SIZE,
148
+ }),
149
+ });
150
+ }
151
+ }
152
+ }
153
+ PaddedExpressionHeatmapBitmapLayer.layerName = 'PaddedExpressionHeatmapBitmapLayer';
154
+ PaddedExpressionHeatmapBitmapLayer.defaultProps = defaultProps;
@@ -0,0 +1,30 @@
1
+ import { BitmapLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
2
+ import { CompositeLayer } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
3
+ import { PIXELATED_TEXTURE_PARAMETERS } from './heatmap-constants';
4
+
5
+
6
+ // These are the same defaultProps as for BitmapLayer.
7
+ const defaultProps = {
8
+ ...BitmapLayer.defaultProps,
9
+ image: { type: 'object', value: null, async: true },
10
+ bounds: { type: 'array', value: [1, 0, 0, 1], compare: true },
11
+ desaturate: {
12
+ type: 'number', min: 0, max: 1, value: 0,
13
+ },
14
+ transparentColor: { type: 'color', value: [0, 0, 0, 0] },
15
+ tintColor: { type: 'color', value: [255, 255, 255] },
16
+ };
17
+
18
+ export default class PixelatedBitmapLayer extends CompositeLayer {
19
+ renderLayers() {
20
+ const { image } = this.props;
21
+ return new BitmapLayer(this.props, {
22
+ id: `${this.props.id}-wrapped`,
23
+ image,
24
+ textureParameters: PIXELATED_TEXTURE_PARAMETERS,
25
+ });
26
+ }
27
+ }
28
+
29
+ PixelatedBitmapLayer.layerName = 'PixelatedBitmapLayer';
30
+ PixelatedBitmapLayer.defaultProps = defaultProps;
@@ -0,0 +1,117 @@
1
+ /* eslint-disable no-underscore-dangle */
2
+ /* eslint-disable import/no-extraneous-dependencies */
3
+ import GL from '@luma.gl/constants';
4
+ import { LayerExtension } from '@deck.gl/core';
5
+ import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER } from '../constants';
6
+ import module from './shader-module';
7
+
8
+ const defaultProps = {
9
+ colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
10
+ colorScaleLo: { type: 'number', value: 0.0, compare: true },
11
+ colorScaleHi: { type: 'number', value: 1.0, compare: true },
12
+ isExpressionMode: false,
13
+ getExpressionValue: { type: 'accessor', value: 0 },
14
+ getSelectionState: { type: 'accessor', value: 0.0 },
15
+ };
16
+
17
+ export default class ScaledExpressionExtension extends LayerExtension {
18
+ getShaders() {
19
+ const { colormap } = this.props;
20
+ return {
21
+ modules: [module],
22
+ defines: {
23
+ [COLORMAP_SHADER_PLACEHOLDER]: GLSL_COLORMAPS.includes(colormap)
24
+ ? colormap
25
+ : GLSL_COLORMAP_DEFAULT,
26
+ },
27
+ };
28
+ }
29
+
30
+ updateState({ props, oldProps }) {
31
+ if (props.colormap !== oldProps.colormap) {
32
+ const { gl } = this.context;
33
+ // Normal single model layers, like ScatterplotLayer
34
+ if (this.state.model) {
35
+ // eslint-disable-next-line no-unused-expressions
36
+ this.state.model?.delete();
37
+ this.state.model = this._getModel(gl);
38
+ } else {
39
+ // Special handling for PolygonLayer sublayer models.
40
+ if (this.state.models) {
41
+ // eslint-disable-next-line no-unused-expressions
42
+ this.state.models?.forEach(model => model?.delete());
43
+ }
44
+ if (this.state.topModel) {
45
+ // eslint-disable-next-line no-unused-expressions
46
+ this.state.topModel?.delete();
47
+ }
48
+ if (this.state.sideModel) {
49
+ // eslint-disable-next-line no-unused-expressions
50
+ this.state.sideModel?.delete();
51
+ }
52
+ if (this._getModels) {
53
+ this.setState(this._getModels(this.context.gl));
54
+ }
55
+ }
56
+ const attributeManager = this.getAttributeManager();
57
+ if (attributeManager) {
58
+ this.getAttributeManager().invalidateAll();
59
+ }
60
+ }
61
+ }
62
+
63
+ initializeState() {
64
+ const layer = this.getCurrentLayer();
65
+ // No need to run this on layers that don't have a `draw` call.
66
+ if (layer.isComposite) {
67
+ return;
68
+ }
69
+ const attributeManager = this.getAttributeManager();
70
+ if (attributeManager) {
71
+ // This attributes is the array of expression data needed for
72
+ // coloring cells against the colormap.
73
+ attributeManager.add({
74
+ expressionValue: {
75
+ type: GL.FLOAT,
76
+ size: 1,
77
+ transition: true,
78
+ accessor: 'getExpressionValue',
79
+ defaultValue: 1,
80
+ // PolygonLayer fill needs not-intsanced attribute but
81
+ // ScatterplotLayer and the PolygonLayer stroke needs instanced.
82
+ // So use another attribute's divisor property as a proxy for this divisor.
83
+ divisor: Object.values(attributeManager.attributes)[0].settings.divisor,
84
+ },
85
+ });
86
+ }
87
+ }
88
+
89
+ draw() {
90
+ const {
91
+ colorScaleLo,
92
+ colorScaleHi,
93
+ isExpressionMode,
94
+ } = this.props;
95
+ const {
96
+ topModel, sideModel, models, model,
97
+ } = this.state;
98
+ const uniforms = {
99
+ uColorScaleRange: [colorScaleLo, colorScaleHi],
100
+ uIsExpressionMode: isExpressionMode,
101
+ };
102
+ // ScatterplotLayer model
103
+ // eslint-disable-next-line no-unused-expressions
104
+ model?.setUniforms(uniforms);
105
+
106
+ // PolygonLayer models from sublayers
107
+ // eslint-disable-next-line no-unused-expressions
108
+ models?.forEach(m => m.setUniforms(uniforms));
109
+ // eslint-disable-next-line no-unused-expressions
110
+ topModel?.setUniforms(uniforms);
111
+ // eslint-disable-next-line no-unused-expressions
112
+ sideModel?.setUniforms(uniforms);
113
+ }
114
+ }
115
+
116
+ ScaledExpressionExtension.extensionName = 'ScaledExpressionExtension';
117
+ ScaledExpressionExtension.defaultProps = defaultProps;
@@ -1,2 +1,3 @@
1
1
  import ScaledExpressionExtension from './ScaledExpressionExtension';
2
+
2
3
  export default ScaledExpressionExtension;
@@ -1,4 +1,5 @@
1
1
  import { colormaps } from '../glsl/index';
2
+
2
3
  /**
3
4
  *
4
5
  * Reference: https://github.com/visgl/deck.gl/blob/8.4-release/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js
@@ -16,8 +17,9 @@ uniform vec2 uColorScaleRange;
16
17
  uniform bool uIsExpressionMode;
17
18
 
18
19
  `;
20
+
19
21
  const inject = {
20
- 'vs:DECKGL_FILTER_COLOR': `
22
+ 'vs:DECKGL_FILTER_COLOR': `
21
23
  if(uIsExpressionMode) {
22
24
  float normalizedExpressionValue = expressionValue / 255.0;
23
25
  float scaledExpressionValue = (normalizedExpressionValue - uColorScaleRange[0]) / max(0.005, (uColorScaleRange[1] - uColorScaleRange[0]));
@@ -25,8 +27,9 @@ const inject = {
25
27
  }
26
28
  `,
27
29
  };
30
+
28
31
  export default {
29
- name: 'scaled-expression',
30
- vs,
31
- inject,
32
+ name: 'scaled-expression',
33
+ vs,
34
+ inject,
32
35
  };
@@ -0,0 +1,34 @@
1
+ /* eslint-disable no-underscore-dangle */
2
+ /* eslint-disable import/no-extraneous-dependencies */
3
+ import GL from '@luma.gl/constants';
4
+ import { LayerExtension } from '@deck.gl/core';
5
+ import module from './shader-module';
6
+
7
+ export default class SelectionExtension extends LayerExtension {
8
+ // eslint-disable-next-line class-methods-use-this
9
+ getShaders() {
10
+ return {
11
+ modules: [module],
12
+ };
13
+ }
14
+
15
+ initializeState(context, extension) {
16
+ const attributeManager = this.getAttributeManager();
17
+ if (attributeManager) {
18
+ attributeManager.add({
19
+ isSelected: {
20
+ type: GL.FLOAT,
21
+ size: 1,
22
+ transition: true,
23
+ accessor: 'getCellIsSelected',
24
+ defaultValue: 1,
25
+ // PolygonLayer needs not-intsanced attribute but
26
+ // ScatterplotLayer needs instanced.
27
+ divisor: Number(extension.opts.instanced),
28
+ },
29
+ });
30
+ }
31
+ }
32
+ }
33
+
34
+ SelectionExtension.extensionName = 'SelectionExtension';
@@ -1,2 +1,3 @@
1
1
  import SelectionExtension from './SelectionExtension';
2
+
2
3
  export default SelectionExtension;
@@ -1,11 +1,12 @@
1
1
  const vs = `
2
2
  attribute float isSelected;
3
3
  `;
4
+
4
5
  const inject = {
5
- 'vs:DECKGL_FILTER_GL_POSITION': `
6
+ 'vs:DECKGL_FILTER_GL_POSITION': `
6
7
  position.z += (1. - isSelected) * .00005; // Add a small z offset for unselected points in the positive direction i.e into the screen.
7
8
  `,
8
- 'fs:#main-start': ` // Gets rid of bad border effects (active after deck.gl 8.5): https://github.com/visgl/deck.gl/pull/6081
9
+ 'fs:#main-start': ` // Gets rid of bad border effects (active after deck.gl 8.5): https://github.com/visgl/deck.gl/pull/6081
9
10
  float distToCenterNew = length(unitPosition) * outerRadiusPixels;
10
11
  float inCircleNew = step(distToCenterNew, outerRadiusPixels);
11
12
  if (inCircleNew == 0.0) {
@@ -13,8 +14,9 @@ const inject = {
13
14
  }
14
15
  `,
15
16
  };
17
+
16
18
  export default {
17
- name: 'selection',
18
- vs,
19
- inject,
19
+ name: 'selection',
20
+ vs,
21
+ inject,
20
22
  };
@@ -0,0 +1,198 @@
1
+ /* eslint-disable import/no-extraneous-dependencies */
2
+ /* eslint-disable no-underscore-dangle */
3
+ // File adopted from nebula.gl's SelectionLayer
4
+ // https://github.com/uber/nebula.gl/blob/8e9c2ec8d7cf4ca7050909ed826eb847d5e2cd9c/modules/layers/src/layers/selection-layer.js
5
+ import { CompositeLayer } from 'deck.gl';
6
+ import { polygon as turfPolygon, point as turfPoint } from '@turf/helpers';
7
+ import booleanWithin from '@turf/boolean-within';
8
+ import booleanContains from '@turf/boolean-contains';
9
+ import booleanOverlap from '@turf/boolean-overlap';
10
+ import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
11
+ import { ScatterplotLayer } from '@deck.gl/layers';
12
+ import { SELECTION_TYPE } from 'nebula.gl';
13
+ import { EditableGeoJsonLayer } from '@nebula.gl/layers';
14
+ import { DrawRectangleMode, DrawPolygonByDraggingMode, ViewMode } from '@nebula.gl/edit-modes';
15
+
16
+ const EDIT_TYPE_ADD = 'addFeature';
17
+ const EDIT_TYPE_CLEAR = 'clearFeatures';
18
+
19
+ // Customize the click handlers for the rectangle and polygon tools,
20
+ // so that clicking triggers the `onEdit` callback.
21
+ class ClickableDrawRectangleMode extends DrawRectangleMode {
22
+ // eslint-disable-next-line class-methods-use-this
23
+ handleClick(event, props) {
24
+ props.onEdit({ editType: EDIT_TYPE_CLEAR });
25
+ }
26
+ }
27
+
28
+ class ClickableDrawPolygonByDraggingMode extends DrawPolygonByDraggingMode {
29
+ // eslint-disable-next-line class-methods-use-this
30
+ handleClick(event, props) {
31
+ props.onEdit({ editType: EDIT_TYPE_CLEAR });
32
+ }
33
+ }
34
+
35
+ const MODE_MAP = {
36
+ [SELECTION_TYPE.RECTANGLE]: ClickableDrawRectangleMode,
37
+ [SELECTION_TYPE.POLYGON]: ClickableDrawPolygonByDraggingMode,
38
+ };
39
+
40
+ const defaultProps = {
41
+ selectionType: SELECTION_TYPE.RECTANGLE,
42
+ layerIds: [],
43
+ onSelect: () => {},
44
+ };
45
+
46
+ const EMPTY_DATA = {
47
+ type: 'FeatureCollection',
48
+ features: [],
49
+ };
50
+
51
+ const LAYER_ID_GEOJSON = 'selection-geojson';
52
+
53
+ const PASS_THROUGH_PROPS = [
54
+ 'lineWidthScale',
55
+ 'lineWidthMinPixels',
56
+ 'lineWidthMaxPixels',
57
+ 'lineWidthUnits',
58
+ 'lineJointRounded',
59
+ 'lineMiterLimit',
60
+ 'pointRadiusScale',
61
+ 'pointRadiusMinPixels',
62
+ 'pointRadiusMaxPixels',
63
+ 'lineDashJustified',
64
+ 'getLineColor',
65
+ 'getFillColor',
66
+ 'getPointRadius',
67
+ 'getLineWidth',
68
+ 'getLineDashArray',
69
+ 'getTentativeLineDashArray',
70
+ 'getTentativeLineColor',
71
+ 'getTentativeFillColor',
72
+ 'getTentativeLineWidth',
73
+ 'editHandlePointRadiusScale',
74
+ 'editHandlePointRadiusMinPixels',
75
+ 'editHandlePointRadiusMaxPixels',
76
+ 'getEditHandlePointColor',
77
+ 'getEditHandlePointRadius',
78
+ 'modeHandlers',
79
+ ];
80
+
81
+ export default class SelectionLayer extends CompositeLayer {
82
+ _selectPolygonObjects(coordinates) {
83
+ const {
84
+ onSelect,
85
+ getCellCoords,
86
+ cellsQuadTree,
87
+ flipY,
88
+ } = this.props;
89
+
90
+ const flippedCoordinates = (flipY
91
+ ? coordinates.map(poly => poly.map(p => ([p[0], -p[1]])))
92
+ : coordinates);
93
+
94
+ // Convert the selection to a turf polygon object.
95
+ const selectedPolygon = turfPolygon(flippedCoordinates);
96
+
97
+ // Create an array to store the results.
98
+ const pickingInfos = [];
99
+
100
+ // quadtree.visit() takes a callback that returns a boolean:
101
+ // If true returned, then the children of the node are _not_ visited.
102
+ // If false returned, then the children of the node are visited.
103
+ // Reference: https://github.com/d3/d3-quadtree#quadtree_visit
104
+ cellsQuadTree.visit((node, x0, y0, x1, y1) => {
105
+ const nodePoints = [[[x0, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0]]];
106
+ const nodePolygon = turfPolygon(nodePoints);
107
+
108
+ const nodePolygonContainsSelectedPolygon = booleanContains(nodePolygon, selectedPolygon);
109
+ const nodePolygonWithinSelectedPolygon = booleanWithin(nodePolygon, selectedPolygon);
110
+ const nodePolygonOverlapsSelectedPolgyon = booleanOverlap(nodePolygon, selectedPolygon);
111
+
112
+ if (!nodePolygonContainsSelectedPolygon
113
+ && !nodePolygonWithinSelectedPolygon
114
+ && !nodePolygonOverlapsSelectedPolgyon) {
115
+ // We are not interested in anything below this node,
116
+ // so return true because we are done with this node.
117
+ return true;
118
+ }
119
+
120
+ // This node made it past the above return statement, so it must either
121
+ // contain, be within, or overlap with the selected polygon.
122
+
123
+ // Check if this is a leaf node.
124
+ if (node.data
125
+ && booleanPointInPolygon(
126
+ turfPoint([].slice.call(getCellCoords(node.data))), selectedPolygon,
127
+ )
128
+ ) {
129
+ // This node has data, so it is a leaf node representing one data point,
130
+ // and we have verified that the point is in the selected polygon.
131
+ pickingInfos.push(node.data);
132
+ }
133
+
134
+ // Return false because we are not done.
135
+ // We want to visit the children of this node.
136
+ return false;
137
+ });
138
+
139
+ onSelect({ pickingInfos });
140
+ }
141
+
142
+ renderLayers() {
143
+ const { onSelect } = this.props;
144
+ const mode = MODE_MAP[this.props.selectionType] || ViewMode;
145
+
146
+ const inheritedProps = {};
147
+ PASS_THROUGH_PROPS.forEach((p) => {
148
+ if (this.props[p] !== undefined) inheritedProps[p] = this.props[p];
149
+ });
150
+ const layers = [
151
+ new EditableGeoJsonLayer(
152
+ this.getSubLayerProps({
153
+ id: LAYER_ID_GEOJSON,
154
+ pickable: true,
155
+ mode,
156
+ modeConfig: {
157
+ dragToDraw: true,
158
+ },
159
+ selectedFeatureIndexes: [],
160
+ data: EMPTY_DATA,
161
+ onEdit: ({ updatedData, editType }) => {
162
+ if (editType === EDIT_TYPE_ADD) {
163
+ const { coordinates } = updatedData.features[0].geometry;
164
+ this._selectPolygonObjects(coordinates);
165
+ } else if (editType === EDIT_TYPE_CLEAR) {
166
+ // We want to select an empty array to clear any previous selection.
167
+ onSelect({ pickingInfos: [] });
168
+ }
169
+ },
170
+ _subLayerProps: {
171
+ guides: {
172
+ pointType: 'circle',
173
+ _subLayerProps: {
174
+ 'points-circle': {
175
+ // Styling for editHandles goes here.
176
+ // Reference: https://github.com/uber/nebula.gl/issues/618#issuecomment-898466319
177
+ type: ScatterplotLayer,
178
+ radiusScale: 1,
179
+ stroked: true,
180
+ getLineWidth: 1,
181
+ radiusMinPixels: 1,
182
+ radiusMaxPixels: 3,
183
+ getPointRadius: 2,
184
+ },
185
+ },
186
+ },
187
+ },
188
+ ...inheritedProps,
189
+ }),
190
+ ),
191
+ ];
192
+
193
+ return layers;
194
+ }
195
+ }
196
+
197
+ SelectionLayer.layerName = 'SelectionLayer';
198
+ SelectionLayer.defaultProps = defaultProps;
@@ -1,4 +1,5 @@
1
1
  import { colormaps } from './glsl/index';
2
+
2
3
  export const vs = `
3
4
  #define SHADER_NAME bitmask-layer-vertex-shader
4
5
 
@@ -20,6 +21,7 @@ void main(void) {
20
21
  DECKGL_FILTER_COLOR(color, geometry);
21
22
  }
22
23
  `;
24
+
23
25
  export const fs = `
24
26
  #define SHADER_NAME bitmask-layer-fragment-shader
25
27
  precision highp float;
@@ -1,11 +1,13 @@
1
1
  // List of the GLSL colormaps available,
2
2
  // to validate against before string replacing.
3
3
  export const GLSL_COLORMAPS = [
4
- 'plasma',
5
- 'viridis',
6
- 'jet',
4
+ 'plasma',
5
+ 'viridis',
6
+ 'jet',
7
7
  ];
8
8
  export const GLSL_COLORMAP_DEFAULT = 'plasma';
9
9
  export const COLORMAP_SHADER_PLACEHOLDER = 'COLORMAP_FUNC';
10
+
10
11
  export const DEFAULT_GL_OPTIONS = { webgl2: true };
12
+
11
13
  export { SELECTION_TYPE } from 'nebula.gl';
File without changes
@@ -0,0 +1,8 @@
1
+ The `.out.glsl` files in this directory must be generated by running
2
+
3
+ ```sh
4
+ pnpm run glslify
5
+ ```
6
+ in the root of the package.
7
+
8
+ Then, the outputs can be copied into JS files and exported.
@@ -0,0 +1,15 @@
1
+ #pragma glslify: plasma = require("glsl-colormap/plasma")
2
+ #pragma glslify: viridis = require("glsl-colormap/viridis")
3
+ #pragma glslify: greys = require("glsl-colormap/greys")
4
+ #pragma glslify: magma = require("glsl-colormap/magma")
5
+ #pragma glslify: jet = require("glsl-colormap/jet")
6
+ #pragma glslify: bone = require("glsl-colormap/bone")
7
+ #pragma glslify: copper = require("glsl-colormap/copper")
8
+ #pragma glslify: density = require("glsl-colormap/density")
9
+ #pragma glslify: inferno = require("glsl-colormap/inferno")
10
+ #pragma glslify: cool = require("glsl-colormap/cool")
11
+ #pragma glslify: hot = require("glsl-colormap/hot")
12
+ #pragma glslify: spring = require("glsl-colormap/spring")
13
+ #pragma glslify: summer = require("glsl-colormap/summer")
14
+ #pragma glslify: autumn = require("glsl-colormap/autumn")
15
+ #pragma glslify: winter = require("glsl-colormap/winter")
@@ -1,3 +1,4 @@
1
+
1
2
  export const colormaps = `#define GLSLIFY 1
2
3
  vec4 plasma (float x_4) {
3
4
  const float e0 = 0.0;
@@ -1,4 +1,5 @@
1
1
  import { colormaps } from './glsl';
2
+
2
3
  /**
3
4
  * No change to the vertex shader from the base BitmapLayer.
4
5
  * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
@@ -28,6 +29,7 @@ void main(void) {
28
29
  DECKGL_FILTER_COLOR(color, geometry);
29
30
  }
30
31
  `;
32
+
31
33
  /**
32
34
  * Fragment shader adapted to perform aggregation and
33
35
  * take color scale functions + sliders into account.