+139
-400
lines changedFilter options
+139
-400
lines changed Original file line number Diff line number Diff line change
@@ -3,8 +3,8 @@ import React, {Component} from 'react';
3 3
import {render} from 'react-dom';
4 4
import {StaticMap} from 'react-map-gl';
5 5
import DeckGL from 'deck.gl';
6 -
import ArcBrushingLayer from './arc-brushing-layer/arc-brushing-layer';
7 -
import ScatterplotBrushingLayer from './scatterplot-brushing-layer/scatterplot-brushing-layer';
6 +
import ArcBrushingLayer from './brushing-layers/arc-brushing-layer';
7 +
import ScatterplotBrushingLayer from './brushing-layers/scatterplot-brushing-layer';
8 8
import {scaleLinear} from 'd3-scale';
9 9 10 10
// Set your mapbox token here
@@ -225,7 +225,7 @@ export class App extends Component {
225 225
new ArcBrushingLayer({
226 226
id: 'arc',
227 227
data: arcs,
228 -
getStrokeWidth: strokeWidth,
228 +
getWidth: strokeWidth,
229 229
opacity,
230 230
brushRadius,
231 231
enableBrushing: startBrushing,
@@ -18,42 +18,53 @@
18 18
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 19
// THE SOFTWARE.
20 20 21 -
import {ArcLayer} from 'deck.gl';
22 - 23 -
import arcVertex from './arc-brushing-layer-vertex.glsl';
24 -
import arcFragment from './arc-brushing-layer-fragment.glsl';
21 +
import {ArcLayer} from '@deck.gl/layers';
22 +
import brushingShaderModule from './brushing-shader-module';
25 23 26 24
const defaultProps = {
27 -
...ArcLayer.defaultProps,
28 25
// show arc if source is in brush
29 26
brushSource: true,
30 27
// show arc if target is in brush
31 28
brushTarget: true,
32 29
enableBrushing: true,
33 -
getStrokeWidth: d => d.strokeWidth,
34 30
// brush radius in meters
35 31
brushRadius: 100000,
36 -
mousePosition: [0, 0]
32 +
mousePosition: null
37 33
};
38 34 39 35
export default class ArcBrushingLayer extends ArcLayer {
40 36
getShaders() {
41 -
// use customized shaders
42 -
return Object.assign({}, super.getShaders(), {
43 -
vs: arcVertex,
44 -
fs: arcFragment
45 -
});
37 +
const shaders = super.getShaders();
38 + 39 +
shaders.modules.push(brushingShaderModule);
40 + 41 +
shaders.inject = {
42 +
'vs:#decl': `
43 +
uniform bool enableBrushing;
44 +
uniform bool brushSource;
45 +
uniform bool brushTarget;
46 +
`,
47 +
'vs:#main-end': `
48 +
if (enableBrushing) {
49 +
brushing_setVisible(
50 +
(brushSource && brushing_isPointInRange(instancePositions.xy)) ||
51 +
(brushTarget && brushing_isPointInRange(instancePositions.zw))
52 +
);
53 +
}
54 +
`,
55 +
'fs:#main-start': `
56 +
brushing_filter();
57 +
`
58 +
};
59 + 60 +
return shaders;
46 61
}
47 62 48 63
draw(opts) {
49 64
// add uniforms
50 65
const uniforms = Object.assign({}, opts.uniforms, {
51 66
brushSource: this.props.brushSource,
52 67
brushTarget: this.props.brushTarget,
53 -
brushRadius: this.props.brushRadius,
54 -
mousePos: this.props.mousePosition
55 -
? new Float32Array(this.unproject(this.props.mousePosition))
56 -
: defaultProps.mousePosition,
57 68
enableBrushing: this.props.enableBrushing
58 69
});
59 70
const newOpts = Object.assign({}, opts, {uniforms});
@@ -0,0 +1,78 @@
1 +
// Copyright (c) 2015-2017 Uber Technologies, Inc.
2 +
//
3 +
// Permission is hereby granted, free of charge, to any person obtaining a copy
4 +
// of this software and associated documentation files (the "Software"), to deal
5 +
// in the Software without restriction, including without limitation the rights
6 +
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 +
// copies of the Software, and to permit persons to whom the Software is
8 +
// furnished to do so, subject to the following conditions:
9 +
//
10 +
// The above copyright notice and this permission notice shall be included in
11 +
// all copies or substantial portions of the Software.
12 +
//
13 +
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 +
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 +
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 +
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 +
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 +
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 +
// THE SOFTWARE.
20 + 21 +
const vs = `
22 +
const float R_EARTH = 6371000.; // earth radius in km
23 + 24 +
uniform vec2 brushing_mousePos;
25 +
uniform float brushing_radius;
26 + 27 +
varying float brushing_hidden;
28 + 29 +
// approximate distance between lng lat in meters
30 +
float distanceBetweenLatLng(vec2 source, vec2 target) {
31 +
vec2 delta = (source - target) * PI / 180.;
32 + 33 +
float a =
34 +
sin(delta.y / 2.) * sin(delta.y / 2.) +
35 +
cos(source.y * PI / 180.) * cos(target.y * PI / 180.) *
36 +
sin(delta.x / 2.) * sin(delta.x / 2.);
37 + 38 +
float c = 2. * atan(sqrt(a), sqrt(1. - a));
39 + 40 +
return R_EARTH * c;
41 +
}
42 + 43 +
bool brushing_isPointInRange(vec2 position) {
44 +
return distanceBetweenLatLng(position, brushing_mousePos) <= brushing_radius;
45 +
}
46 + 47 +
void brushing_setVisible(bool visible) {
48 +
brushing_hidden = float(!visible);
49 +
}
50 +
`;
51 + 52 +
const fs = `
53 +
varying float brushing_hidden;
54 + 55 +
void brushing_filter() {
56 +
if (brushing_hidden > 0.5) {
57 +
discard;
58 +
}
59 +
}
60 +
`;
61 + 62 +
const INITIAL_MODULE_OPTIONS = {};
63 + 64 +
export default {
65 +
name: 'brushing',
66 +
dependencies: ['project'],
67 +
vs,
68 +
fs,
69 +
getUniforms: (opts = INITIAL_MODULE_OPTIONS) => {
70 +
if (opts.viewport) {
71 +
return {
72 +
brushing_radius: opts.brushRadius,
73 +
brushing_mousePos: opts.mousePosition ? opts.viewport.unproject(opts.mousePosition) : [0, 0]
74 +
};
75 +
}
76 +
return {};
77 +
}
78 +
};
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4