update brushing example

examples/website/brushing/app.js

@@ -3,8 +3,8 @@ import React, {Component} from 'react';
 import {render} from 'react-dom';
 import {StaticMap} from 'react-map-gl';
 import DeckGL from 'deck.gl';
-import ArcBrushingLayer from './arc-brushing-layer/arc-brushing-layer';
-import ScatterplotBrushingLayer from './scatterplot-brushing-layer/scatterplot-brushing-layer';
+import ArcBrushingLayer from './brushing-layers/arc-brushing-layer';
+import ScatterplotBrushingLayer from './brushing-layers/scatterplot-brushing-layer';
 import {scaleLinear} from 'd3-scale';
 
 // Set your mapbox token here
@@ -225,7 +225,7 @@ export class App extends Component {
       new ArcBrushingLayer({
         id: 'arc',
         data: arcs,
-        getStrokeWidth: strokeWidth,
+        getWidth: strokeWidth,
         opacity,
         brushRadius,
         enableBrushing: startBrushing,

examples/website/brushing/arc-brushing-layer/arc-brushing-layer.js → examples/website/brushing/brushing-layers/arc-brushing-layer.js

@@ -18,42 +18,53 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {ArcLayer} from 'deck.gl';
-
-import arcVertex from './arc-brushing-layer-vertex.glsl';
-import arcFragment from './arc-brushing-layer-fragment.glsl';
+import {ArcLayer} from '@deck.gl/layers';
+import brushingShaderModule from './brushing-shader-module';
 
 const defaultProps = {
-  ...ArcLayer.defaultProps,
   // show arc if source is in brush
   brushSource: true,
   // show arc if target is in brush
   brushTarget: true,
   enableBrushing: true,
-  getStrokeWidth: d => d.strokeWidth,
   // brush radius in meters
   brushRadius: 100000,
-  mousePosition: [0, 0]
+  mousePosition: null
 };
 
 export default class ArcBrushingLayer extends ArcLayer {
   getShaders() {
-    // use customized shaders
-    return Object.assign({}, super.getShaders(), {
-      vs: arcVertex,
-      fs: arcFragment
-    });
+    const shaders = super.getShaders();
+
+    shaders.modules.push(brushingShaderModule);
+
+    shaders.inject = {
+      'vs:#decl': `
+uniform bool enableBrushing;
+uniform bool brushSource;
+uniform bool brushTarget;
+`,
+      'vs:#main-end': `
+  if (enableBrushing) {
+    brushing_setVisible(
+      (brushSource && brushing_isPointInRange(instancePositions.xy)) ||
+      (brushTarget && brushing_isPointInRange(instancePositions.zw))
+    );
+  }
+`,
+      'fs:#main-start': `
+  brushing_filter();
+`
+    };
+
+    return shaders;
   }
 
   draw(opts) {
     // add uniforms
     const uniforms = Object.assign({}, opts.uniforms, {
       brushSource: this.props.brushSource,
       brushTarget: this.props.brushTarget,
-      brushRadius: this.props.brushRadius,
-      mousePos: this.props.mousePosition
-        ? new Float32Array(this.unproject(this.props.mousePosition))
-        : defaultProps.mousePosition,
       enableBrushing: this.props.enableBrushing
     });
     const newOpts = Object.assign({}, opts, {uniforms});

examples/website/brushing/brushing-layers/brushing-shader-module.js

@@ -0,0 +1,78 @@
+// Copyright (c) 2015-2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+const vs = `
+  const float R_EARTH = 6371000.; // earth radius in km
+
+  uniform vec2 brushing_mousePos;
+  uniform float brushing_radius;
+
+  varying float brushing_hidden;
+
+  // approximate distance between lng lat in meters
+  float distanceBetweenLatLng(vec2 source, vec2 target) {
+    vec2 delta = (source - target) * PI / 180.;
+
+    float a =
+      sin(delta.y / 2.) * sin(delta.y / 2.) +
+      cos(source.y * PI / 180.) * cos(target.y * PI / 180.) *
+      sin(delta.x / 2.) * sin(delta.x / 2.);
+
+    float c = 2. * atan(sqrt(a), sqrt(1. - a));
+
+    return R_EARTH * c;
+  }
+
+  bool brushing_isPointInRange(vec2 position) {
+    return distanceBetweenLatLng(position, brushing_mousePos) <= brushing_radius;
+  }
+
+  void brushing_setVisible(bool visible) {
+    brushing_hidden = float(!visible);
+  }
+`;
+
+const fs = `
+  varying float brushing_hidden;
+  
+  void brushing_filter() {
+    if (brushing_hidden > 0.5) {
+      discard;
+    }
+  }
+`;
+
+const INITIAL_MODULE_OPTIONS = {};
+
+export default {
+  name: 'brushing',
+  dependencies: ['project'],
+  vs,
+  fs,
+  getUniforms: (opts = INITIAL_MODULE_OPTIONS) => {
+    if (opts.viewport) {
+      return {
+        brushing_radius: opts.brushRadius,
+        brushing_mousePos: opts.mousePosition ? opts.viewport.unproject(opts.mousePosition) : [0, 0]
+      };
+    }
+    return {};
+  }
+};