Further API/doc cleanup. Fixes

visgl · ibgreen · Mar 13, 2017 · Mar 5, 2017 · Mar 10, 2017 · Mar 11, 2017
commit ae400c51a2a0b78a4662fa0be4b6c9c42e853703
diff --git a/demo/src/components/demos/grid.js b/demo/src/components/demos/grid.js
@@ -55,8 +55,7 @@ export default class GridDemo extends Component {
       id: 'grid',
       data,
       minColor: [0, 0, 0, 0],
-      unitWidth: params.cellSize.value,
-      unitHeight: params.cellSize.value
+      cellSizePixels: params.cellSize.value
     });
 
     return (

diff --git a/docs/layers/arc-layer.md b/docs/layers/arc-layer.md
@@ -22,7 +22,7 @@ Inherits from all [Base Layer](/docs/layers/base-layer.md) properties.
 
 - Default: `1`
 
-The stroke width used to draw each arc. Unit in pixels.
+The stroke width used to draw each arc. Unit is pixels.
 
 ## Accessors
 

diff --git a/docs/layers/line-layer.md b/docs/layers/line-layer.md
@@ -21,7 +21,7 @@ Inherits from all [Base Layer](/docs/layers/base-layer.md) properties.
 
 - Default: `1`
 
-The stroke width used to draw each line. Unit in pixels.
+The stroke width used to draw each line. Unit is pixels.
 
 
 ## Accessors

diff --git a/docs/layers/screen-grid-layer.md b/docs/layers/screen-grid-layer.md
@@ -19,17 +19,11 @@ visuals when used with the right data set can be quite effective.
 
 Inherits from all [Base Layer](/docs/layers/base-layer.md) properties.
 
-##### `unitWidth` (Number, optional)
+##### `cellSizePixels` (Number, optional)
 
 - Default: `100`
 
-Unit width of the bins.
-
-##### `unitHeight` (Number, optional)
-
-- Default: `100`
-
-Unit height of the bins.
+Unit width/height of the bins.
 
 #### `minColor` (Number[4], optional)
 

diff --git a/docs/upgrade-guide.md b/docs/upgrade-guide.md
@@ -5,28 +5,58 @@
 ### Importing deck.gl React component
 
 A small but breaking change is that the 'deck.gl/react' import is no
-longer available, since the relative file caused complications with
-the new support for support "tree shaking" (multiple transpiled distributions).
-As of v4.0, the user is expected to import deck.gl using "pre-v3.0" way as
-follows:
-
+longer available (see remarks). As of v4.0, the user is expected to
+import deck.gl using "pre-v3.0" way as follows:
 ```
-// V3
-import DeckGL from 'deck.gl/react';
 // V4
 import DeckGL from 'deck.gl';
+// V3
+import DeckGL from 'deck.gl/react';
 ```
 
 ### Removed, Changed and Deprecated Layer Properties
 
-#### `BaseLayer.dataIterator` prop (Removed)
+| Layer            | Old Prop       | New Prop         | Comment |
+| ---              | ---            | ---              | ---     |
+| Layer            | `dataIterator` | N/A              | Prop was not functional in v3    |
+| ScatterplotLayer | `radius`       | `radiusScale`    | Default has changed from 30 to 1 |
+| ScatterplotLayer | `drawOutline`  | `outline`        | |
+| ScreenGridLayer  | `unitWidth`    | `cellSizePixels` | |
+| ScreenGridLayer  | `unitHeight`   | `cellSizePixels` | | |
+
+#### `Layer.dataIterator` prop (Removed)
+
+This prop has been removed in deck.gl v4. Note that it was not functioning
+as documented in deck.gl v3.
+
+#### Props with `Scale` suffix
+
+Props that have their name end of `Scale` is a set of props that
+multiply some existing value for all objects in the layers. These props usually correspond
+to WebGL shader uniforms that "scaling" all values of specific attributes simultaneously.
+
+For API consistency reasons these have all been renamed with the suffix `..Scale`
+
+#### updateTriggers
+
+Update triggers can now be specified by referring to the name of the accessor,
+instead of the name of the actual WebGL attribute.
+
+Note that this is supported on all layers supplied by deck.gl, but if you
+are using older layers, they need a small addition to their attribute
+definitions, see below.
+
 
-This prop has been removed in deck.gl v4 as it was not correctly functioning
-as intended in deck.gl v3.
+### Deprecated/Removed Layers
 
-### Deprecated and Removed Layers
+| Layer            | Status       | Replacement         |
+| ---              | ---            | ---              | ---     |
+| `ChoroplethLayer`  | Deprecated | `GeoJsonLayer`, `PolygonLayer` and `PathLayer`    |
+| `ChoroplethLayer64` | Deprecated | `GeoJsonLayer`, `PolygonLayer` and `PathLayer`    |
+| `ExtrudedChoroplethLayer` | Deprecated | `GeoJsonLayer`, `PolygonLayer` and `PathLayer`    |
+| `EnhancedChoroplethLayer`  | Moved to samples  | `PathLayer`    |
 
-#### ChoroplethLayer, ChoroplethLayer64, ExtrudedChoroplethLayer (Deprecated)
+#### ChoroplethLayer, ChoroplethLayer64, ExtrudedChoroplethLayer
 
 These set of layers are deprecated in deck.gl v4, with their functionality
 completely substituted by more unified, flexible and performant new layers:
@@ -41,45 +71,11 @@ As a deprecated layer, the Choropleth-family layers will stick around for
 at least another major revision, but please take some time to upgrade to the new
 GeoJsonLayer.
 
-### EnhancedChoroplethLayer (Removed)
+#### EnhancedChoroplethLayer
 
 This was a a sample layer in deck.gl v3 and has now been moved to a
 stand-alone example and is no longer exported from the deck.gl npm module.
 
 Developers can either copy this layer from deck.gl v3 or the example,
 or consider using the new `PathLayer` which also handles wide lines albeit in a
 slightly different way.
-
-
-### Upgrading Layer Accessors and Properties
-
-As the result of an API cleanup, there are some deprecated layers and some
-deprecated properties on existing layers. This continue to work in v4 but will
-most likely be removed in the next major release.
-
-#### updateTriggers
-
-Update triggers can now be specified by referring to the name of the accessor,
-instead of the name of the actual WebGL attribute.
-
-Note that this is supported on all layers supplied by deck.gl, but if you
-are using older layers, they need a small addition to their attribute
-definitions, see below.
-
-#### Props with `Scale` suffix
-
-Props that have their name end of `Scale` is a set of props that
-multiply some existing value for all objects in the layers. These props usually correspond
-to WebGL shader uniforms that "scaling" all values of specific attributes simultaneously.
-
-For API consistency reasons these have all been renamed with the suffix `..Scale`
-
-| ScatterplotLayer | radius | radiusScale |
-
-| GridLayer | elevation | elevationScale |
-
-| HexagonLayer | elevation | elevationScale |
-
-| IconLayer | size | sizeScale |
-
-| PathLayer | strokeWidth | strokeWidthScale |
diff --git a/examples/layer-browser/src/examples/core-layers.js b/examples/layer-browser/src/examples/core-layers.js
@@ -72,24 +72,32 @@ const GeoJsonLayerExample = {
   getData: () => dataSamples.geojson,
   props: {
     id: 'geojsonLayer',
-    // TODO change to use the color util when it is landed
+    getRadius: f => MARKER_SIZE_MAP[f.properties['marker-size']],
+    getFillColor: f => {
+      const color = parseColor(f.properties.fill || f.properties['marker-color']);
+      const opacity = (f.properties['fill-opacity'] || 1) * 255;
+      return setOpacity(color, opacity);
+    },
+    getColor: f => {
+      const color = parseColor(f.properties.stroke);
+      const opacity = (f.properties['stroke-opacity'] || 1) * 255;
+      return setOpacity(color, opacity);
+    },
+    getWidth: f => f.properties['stroke-width'],
+    getHeight: f => Math.random() * 1000,
+    widthScale: 10,
+    widthMinPixels: 1,
+    pickable: true,
+
+    // TODO - Old accessors
     getPointColor: f => parseColor(f.properties['marker-color']),
     getPointRadius: f => MARKER_SIZE_MAP[f.properties['marker-size']],
     getStrokeColor: f => {
       const color = parseColor(f.properties.stroke);
-      const opacity = f.properties['stroke-opacity'] * 255;
+      const opacity = (f.properties['stroke-opacity'] || 1) * 255;
       return setOpacity(color, opacity);
     },
-    getStrokeWidth: f => f.properties['stroke-width'],
-    getFillColor: f => {
-      const color = parseColor(f.properties.fill);
-      const opacity = f.properties['fill-opacity'] * 255;
-      return setOpacity(color, opacity);
-    },
-    getHeight: f => Math.random() * 1000,
-    strokeWidthScale: 10,
-    strokeWidthMinPixels: 1,
-    pickable: true
+    getStrokeWidth: f => f.properties['stroke-width']
   }
 };
 
@@ -129,7 +137,8 @@ const PathLayerExample = {
     opacity: 0.6,
     getPath: f => get(f, 'path'),
     getColor: f => [128, 0, 0],
-    getStrokeWidth: f => 10,
+    getWidth: f => 10,
+    strokeMinWidth: 1,
     pickable: true
   }
 };
@@ -140,8 +149,7 @@ const ScreenGridLayerExample = {
   props: {
     id: 'screenGridLayer',
     getPosition: d => get(d, 'COORDINATES'),
-    unitWidth: 40,
-    unitHeight: 40,
+    cellSizePixels: 40,
     minColor: [0, 0, 80, 0],
     maxColor: [100, 255, 0, 128],
     pickable: false
@@ -170,6 +178,7 @@ const ScatterplotLayerExample = {
     getRadius: d => get(d, 'SPACES'),
     opacity: 0.5,
     pickable: true,
+    radiusScale: 30,
     radiusMinPixels: 1,
     radiusMaxPixels: 30
   }

diff --git a/examples/layer-browser/src/utils/color.js b/examples/layer-browser/src/utils/color.js
@@ -10,7 +10,7 @@ export function parseColor(color) {
   if (typeof color === 'string') {
     return parseHexColor(color);
   }
-  return null;
+  return [0, 0, 0, 255];
 }
 
 // Parse a hex color

diff --git a/src/layers/core/geojson-layer/geojson-layer.js b/src/layers/core/geojson-layer/geojson-layer.js
@@ -39,13 +39,13 @@ const defaultProps = {
   // TODO: Missing props: radiusMinPixels, strokeWidthMinPixels, ...
 
   // Line and polygon outline color
-  getStrokeColor: f => get(f, 'properties.strokeColor') || defaultStrokeColor,
+  getColor: f => get(f, 'properties.strokeColor') || defaultStrokeColor,
   // Point and polygon fill color
   getFillColor: f => get(f, 'properties.fillColor') || defaultFillColor,
   // Point radius
   getRadius: f => get(f, 'properties.radius') || get(f, 'properties.size') || 5,
   // Line and polygon outline accessors
-  getStrokeWidth: f => get(f, 'properties.strokeWidth') || 1,
+  getWidth: f => get(f, 'properties.strokeWidth') || 1,
   // Polygon extrusion accessor
   getElevation: f => 1000
 };
@@ -93,39 +93,38 @@ export default class GeoJsonLayer extends CompositeLayer {
     const onClick = this._onClickSubLayer.bind(this);
 
     // Filled Polygon Layer
-    const polygonFillLayer = fillPolygons && new SolidPolygonLayer(Object.assign({},
-      this.props, {
-        id: `${id}-polygon-fill`,
-        data: polygonFeatures,
-        getPolygon: getCoordinates,
-        getElevation,
-        getColor: getFillColor,
-        extruded,
-        wireframe: false,
-        onHover,
-        onClick,
-        updateTriggers: {
-          getElevation: this.props.updateTriggers.getElevation,
-          getColor: this.props.updateTriggers.getFillColor
-        }
-      }));
+    const polygonFillLayer = fillPolygons && new SolidPolygonLayer(Object.assign({}, this.props, {
+      id: `${id}-polygon-fill`,
+      data: polygonFeatures,
+      extruded,
+      wireframe: false,
+      getPolygon: getCoordinates,
+      getElevation,
+      getColor: getFillColor,
+      updateTriggers: {
+        getElevation: this.props.updateTriggers.getElevation,
+        getColor: this.props.updateTriggers.getFillColor
+      },
+      onHover,
+      onClick
+    }));
 
     // Polygon outline or wireframe
     let polygonOutlineLayer = null;
     if (drawPolygons && extruded && wireframe) {
       polygonOutlineLayer = new SolidPolygonLayer(Object.assign({}, this.props, {
         id: `${id}-polygon-wireframe`,
         data: polygonFeatures,
+        extruded: true,
+        wireframe: true,
         getPolygon: getCoordinates,
         getElevation,
         getColor,
-        extruded: true,
-        wireframe: true,
-        onHover,
-        onClick,
         updateTriggers: Object.assign({}, this.props.updateTriggers, {
           getColor: this.props.updateTriggers.getFillColor
-        })
+        }),
+        onHover,
+        onClick
       }));
     } else if (drawPolygons) {
       polygonOutlineLayer = new PathLayer(Object.assign({}, this.props, {
@@ -139,28 +138,28 @@ export default class GeoJsonLayer extends CompositeLayer {
       }));
     }
 
-    const lineLayer = drawLines && new PathLayer(Object.assign({},
-      this.props, {
-        id: `${id}-line-paths`,
-        data: lineFeatures,
-        getPath: getCoordinates,
-        getColor,
-        getStrokeWidth,
-        onHover,
-        onClick
-      }));
-
-    const pointLayer = drawPoints && new ScatterplotLayer(Object.assign({},
-      this.props, {
-        id: `${id}-points`,
-        data: pointFeatures,
-        getPosition: getCoordinates,
-        getColor,
-        getRadius,
-        onHover,
-        onClick,
-        fp64: this.props.fp64
-      }));
+    const lineLayer = drawLines && new PathLayer(Object.assign({}, this.props, {
+      id: `${id}-line-paths`,
+      data: lineFeatures,
+      getPath: getCoordinates,
+      getColor,
+      getStrokeWidth,
+      onHover,
+      onClick
+    }));
+
+    const pointLayer = drawPoints && new ScatterplotLayer(Object.assign({}, this.props, {
+      id: `${id}-points`,
+      data: pointFeatures,
+      getPosition: getCoordinates,
+      getColor: getFillColor,
+      getRadius,
+      updateTriggers: Object.assign({}, this.props.updateTriggers, {
+        getColor: this.props.updateTriggers.getFillColor
+      }),
+      onHover,
+      onClick
+    }));
 
     return [
       polygonFillLayer,

diff --git a/src/layers/core/path-layer/path-layer-vertex.glsl b/src/layers/core/path-layer/path-layer-vertex.glsl
@@ -10,9 +10,9 @@ attribute float instanceStrokeWidths;
 attribute vec4 instanceColors;
 attribute vec3 instancePickingColors;
 
-uniform float strokeWidthScale;
-uniform float strokeWidthMinPixels;
-uniform float strokeWidthMaxPixels;
+uniform float widthScale;
+uniform float widthMinPixels;
+uniform float widthMaxPixels;
 uniform float jointType;
 uniform float miterLimit;
 
@@ -32,8 +32,8 @@ float flipIfTrue(bool flag) {
 // calculate line join positions
 vec3 lineJoin(vec3 prevPoint, vec3 currPoint, vec3 nextPoint) {
 
-  float width = clamp(project_scale(instanceStrokeWidths * strokeWidthScale),
-    strokeWidthMinPixels, strokeWidthMaxPixels) / 2.0;
+  float width = clamp(project_scale(instanceStrokeWidths * widthScale),
+    widthMinPixels, widthMaxPixels) / 2.0;
 
   vec2 deltaA = currPoint.xy - prevPoint.xy;
   vec2 deltaB = nextPoint.xy - currPoint.xy;