fix deprecated props in brushing example (visgl#2634)

* fix deprecated props in brushing example * modified lineWidth
mpearson · Jan 28, 2019 · cf0921a · cf0921a
1 parent 806f053
commit cf0921a
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 18 deletions.
diff --git a/examples/website/brushing/app.js b/examples/website/brushing/app.js
@@ -193,21 +193,22 @@ export class App extends Component {
         pickable: false,
         // only show source points when brushing
         radiusScale: startBrushing ? 3000 : 0,
-        getColor: d => (d.gain > 0 ? TARGET_COLOR : SOURCE_COLOR),
+        getFillColor: d => (d.gain > 0 ? TARGET_COLOR : SOURCE_COLOR),
         getTargetPosition: d => [d.position[0], d.position[1], 0]
       }),
       new ScatterplotBrushingLayer({
         id: 'targets-ring',
         data: targets,
         brushRadius,
         mousePosition,
-        strokeWidth: 2,
-        outline: true,
+        getLineWidth: 2,
+        stroked: true,
+        filled: false,
         opacity: 1,
         enableBrushing: startBrushing,
         // only show rings when brushing
         radiusScale: startBrushing ? 4000 : 0,
-        getColor: d => (d.net > 0 ? TARGET_COLOR : SOURCE_COLOR)
+        getLineColor: d => (d.net > 0 ? TARGET_COLOR : SOURCE_COLOR)
       }),
       new ScatterplotBrushingLayer({
         id: 'targets',
@@ -219,7 +220,7 @@ export class App extends Component {
         pickable: true,
         radiusScale: 3000,
         onHover: this._onHover,
-        getColor: d => (d.net > 0 ? TARGET_COLOR : SOURCE_COLOR)
+        getFillColor: d => (d.net > 0 ? TARGET_COLOR : SOURCE_COLOR)
       }),
       new ArcBrushingLayer({
         id: 'arc',

diff --git a/...s/website/brushing/scatterplot-brushing-layer/scatterplot-brushing-layer-fragment.glsl.js b/...s/website/brushing/scatterplot-brushing-layer/scatterplot-brushing-layer-fragment.glsl.js
@@ -23,17 +23,27 @@ export default `\
 
 precision highp float;
 
-varying vec4 vColor;
+uniform bool filled;
+
+varying vec4 vFillColor;
+varying vec4 vLineColor;
 varying vec2 unitPosition;
 varying float innerUnitRadius;
 
 void main(void) {
 
   float distToCenter = length(unitPosition);
-  if (distToCenter > 1.0 || distToCenter < innerUnitRadius) {
+
+  if (distToCenter > 1.0) {
+    discard;
+  } 
+  if (distToCenter > innerUnitRadius) {
+    gl_FragColor = vLineColor;
+  } else if (filled) {
+    gl_FragColor = vFillColor;
+  } else {
     discard;
   }
-  gl_FragColor = vColor;
   gl_FragColor = picking_filterPickingColor(gl_FragColor);
 }
 `;
diff --git a/...les/website/brushing/scatterplot-brushing-layer/scatterplot-brushing-layer-vertex.glsl.js b/...les/website/brushing/scatterplot-brushing-layer/scatterplot-brushing-layer-vertex.glsl.js
@@ -27,23 +27,29 @@ attribute vec3 positions;
 attribute vec3 instancePositions;
 attribute vec3 instanceTargetPositions;
 attribute float instanceRadius;
-attribute vec4 instanceColors;
+attribute float instanceLineWidths;
+attribute vec4 instanceFillColors;
+attribute vec4 instanceLineColors;
 attribute vec3 instancePickingColors;
 
 uniform float opacity;
 uniform float radiusScale;
 uniform float radiusMinPixels;
 uniform float radiusMaxPixels;
-uniform float outline;
-uniform float strokeWidth;
+uniform float lineWidthScale;
+uniform float lineWidthMinPixels;
+uniform float lineWidthMaxPixels;
+uniform float stroked;
+uniform bool filled;
 
 // uniform for brushing
 uniform vec2 mousePos;
 uniform float brushRadius;
 uniform bool enableBrushing;
 uniform float brushTarget;
 
-varying vec4 vColor;
+varying vec4 vFillColor;
+varying vec4 vLineColor;
 varying vec2 unitPosition;
 varying float innerUnitRadius;
 
@@ -90,25 +96,32 @@ void main(void) {
     project_scale(radiusScale * finalRadius),
     radiusMinPixels, radiusMaxPixels
   );
-  // outline is centered at the radius
+  
+  // multiply out line width and clamp to limits
+  float lineWidth = clamp(
+    project_scale(lineWidthScale * instanceLineWidths),
+    lineWidthMinPixels, lineWidthMaxPixels
+  );
+  
   // outer radius needs to offset by half stroke width
-  outerRadiusPixels += outline * mix(0., strokeWidth, isInBrush) / 2.;
+  outerRadiusPixels += stroked * mix(0., lineWidth, isInBrush) / 2.;
 
   // position on the containing square in [-1, 1] space
   unitPosition = positions.xy;
+  
   // 0 - solid circle, 1 - stroke with lineWidth=0
-  innerUnitRadius = outline * (1. - strokeWidth / outerRadiusPixels);
+  innerUnitRadius = 1. - stroked * lineWidth / outerRadiusPixels;
 
   // Find the center of the point and add the current vertex
   vec3 center = project_position(instancePositions);
   vec3 vertex = positions * outerRadiusPixels;
   gl_Position = project_to_clipspace(vec4(center + vertex, 1.));
 
   // Apply opacity to instance color
-  vColor = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;
+  vFillColor = vec4(instanceFillColors.rgb, instanceFillColors.a * opacity) / 255.;
+  vLineColor = vec4(instanceLineColors.rgb, instanceLineColors.a * opacity) / 255.;
 
   // Set picking color
   picking_setPickingColor(instancePickingColors);
-
 }
 `;
diff --git a/examples/website/brushing/scatterplot-brushing-layer/scatterplot-brushing-layer.js b/examples/website/brushing/scatterplot-brushing-layer/scatterplot-brushing-layer.js
@@ -31,7 +31,8 @@ const defaultProps = {
   // brush radius in meters
   brushRadius: 100000,
   mousePosition: [0, 0],
-  getTargetPosition: d => d.target
+  getTargetPosition: d => d.target,
+  radiusMinPixels: 0
 };
 
 export default class ScatterplotBrushingLayer extends ScatterplotLayer {