Skip to content

Commit

Permalink
add render tests; update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Xiaoji Chen committed May 16, 2019
1 parent ab53cdc commit 633551b
Show file tree
Hide file tree
Showing 7 changed files with 150 additions and 47 deletions.
79 changes: 54 additions & 25 deletions docs/layers/column-layer.md
View file
Expand Up @@ -123,37 +123,67 @@ Radius multiplier, between 0 - 1. The radius of the disk is calculated by

* Default: `true`

Whether to draw a filled column (solid fill). Note that only
the area between the outer polygon and any holes will be filled.
Whether to draw a filled column (solid fill).

##### `elevationScale` (Number, optional)
##### `stroked` (Boolean, optional)

* Default: `1`
* Default: `false`

Column elevation multiplier. The elevation of column is calculated by
`elevationScale * getElevation(d)`. `elevationScale` is a handy property
to scale all hexagon elevations without updating the data.
Whether to draw an outline around the disks. Only applies if `extruded: false`.

##### `extruded` (Boolean, optional)

* Default: `true`

Whether to extrude hexagon. If se to false, all hexagons will be set to flat.
Whether to extrude the columns. If se to `false`, all columns will be set to flat.

##### `wireframe` (Boolean, optional)

* Default: `false`

Whether to generate a line wireframe of the column. The outline will have
"horizontal" lines closing the top and bottom polygons and a vertical line
(a "strut") for each vertex on the polygon.
(a "strut") for each vertex on the polygon. Only applies if `extruded: true`.

##### `fp64` (Boolean, optional)

* Default: `false`

Whether the layer should be rendered in high-precision 64-bit mode. Note that since deck.gl v6.1, the default 32-bit projection uses a hybrid mode that matches 64-bit precision with significantly better performance.

##### `elevationScale` (Number, optional)

* Default: `1`

Column elevation multiplier. The elevation of column is calculated by
`elevationScale * getElevation(d)`. `elevationScale` is a handy property
to scale all column elevations without updating the data.

##### `lineWidthUnits` (String, optional)

* Default: `'meters'`

The units of the outline width, one of `'meters'`, `'pixels'`. When zooming in and out, meter sizes scale with the base map, and pixel sizes remain the same on screen.

##### `lineWidthScale` (Boolean, optional)

* Default: `1`

The line width multiplier that multiplied to all outlines if the `stroked` attribute is `true`.

##### `lineWidthMinPixels` (Number, optional)

* Default: `0`

The minimum outline width in pixels.

##### `lineWidthMaxPixels` (Number, optional)

* Default: Number.MAX_SAFE_INTEGER

The maximum outline width in pixels.


##### `material` (Object, optional)

* Default: `new PhongMaterial()`
Expand All @@ -169,20 +199,9 @@ Check [PhongMaterial](https://github.com/uber/luma.gl/tree/7.0-release/docs/api-

Method called to retrieve the position of each column, in `[x, y]`. An optional third component can be used to set the elevation of the bottom.

##### `getColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")

* Default: `[255, 0, 255, 255]`

The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.

* If an array is provided, it is used as the color for all objects.
* If a function is provided, it is called on each object to retrieve its color.

It will be overridden by `getLineColor` and `getFillColor` if these new accessors are specified.

##### `getFillColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")

* Default: `[255, 0, 255, 255]`
* Default: `[0, 0, 0, 255]`

The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.

Expand All @@ -192,12 +211,12 @@ The rgba color of each object, in `r, g, b, [a]`. Each component is in the 0-255

##### `getLineColor` ([Function](/docs/developer-guide/using-layers.md#accessors)|Array, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")

* Default: `[255, 0, 0, 255]`
* Default: `[0, 0, 0, 255]`

The rgba outline color of each polygon, in `r, g, b, [a]`. Each component is in the 0-255 range.
The rgba outline color of each object, in `r, g, b, [a]`. Each component is in the 0-255 range.

* If an array is provided, it is used as the outline color for all polygons.
* If a function is provided, it is called on each polygon to retrieve its outline color.
* If an array is provided, it is used as the outline color for all columns.
* If a function is provided, it is called on each object to retrieve its outline color.
* If not provided, it falls back to `getColor`.

##### `getElevation` ([Function](/docs/developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")
Expand All @@ -209,6 +228,16 @@ The elevation of each cell in meters.
* If a number is provided, it is used as the elevation for all objects.
* If a function is provided, it is called on each object to retrieve its elevation.


##### `getLineWidth` ([Function](/docs/developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")

* Default: `1`

The width of the outline of the column, in units specified by `lineWidthUnits` (default meters). Only applies if `extruded: false` and `stroked: true`.

* If a number is provided, it is used as the outline width for all columns.
* If a function is provided, it is called on each object to retrieve its outline width.

## Source

[modules/layers/src/column-layer](https://github.com/uber/deck.gl/tree/master/modules/layers/src/column-layer)
Expand Down
2 changes: 1 addition & 1 deletion modules/layers/src/column-layer/column-layer.js
View file
Expand Up @@ -28,7 +28,7 @@ const defaultMaterial = new PhongMaterial();
import vs from './column-layer-vertex.glsl';
import fs from './column-layer-fragment.glsl';

const DEFAULT_COLOR = [255, 0, 255, 255];
const DEFAULT_COLOR = [0, 0, 0, 255];

const defaultProps = {
diskResolution: {type: 'number', min: 4, value: 20},
Expand Down
14 changes: 5 additions & 9 deletions test/modules/geo-layers/h3-layers.spec.js
View file
Expand Up @@ -34,17 +34,13 @@ test('H3HexagonLayer', t => {
},
assert: t.ok,
onBeforeUpdate: ({testCase}) => t.comment(testCase.title),
onAfterUpdate: ({layer, subLayers}) => {
onAfterUpdate: ({layer, subLayer}) => {
t.is(subLayer.props.stroked, layer.props.stroked, 'stroked prop is forwarded');

if (layer._shouldUseHighPrecision()) {
t.ok(
subLayers.find(l => l.constructor.layerName === 'PolygonLayer'),
'renders polygon layer'
);
t.ok(subLayer.constructor.layerName, 'PolygonLayer', 'renders polygon layer');
} else {
t.ok(
subLayers.find(l => l.constructor.layerName === 'ColumnLayer'),
'renders column layer'
);
t.ok(subLayer.constructor.layerName, 'ColumnLayer', 'renders column layer');
}
}
});
Expand Down
5 changes: 4 additions & 1 deletion test/modules/layers/core-layers.spec.js
View file
Expand Up @@ -156,7 +156,10 @@ test('ColumnLayer', t => {
getPosition: d => d.position
},
assert: t.ok,
onBeforeUpdate: ({testCase}) => t.comment(testCase.title)
onBeforeUpdate: ({testCase}) => t.comment(testCase.title),
onAfterUpdate: ({layer}) => {
t.ok(layer.state.edgeDistance, 'edgeDistance is populated');
}
});

testLayer({Layer: ColumnLayer, testCases, onError: t.notOk});
Expand Down
Binary file added test/render/golden-images/column-lnglat-stroke.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/render/golden-images/h3-hexagon-flat.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
97 changes: 86 additions & 11 deletions test/render/test-cases.js
View file
Expand Up @@ -154,7 +154,7 @@ export const TEST_CASES = [
getPosition: d => d.position,
getNormal: d => [0, 0.5, 0.2],
getColor: d => [255, 255, 0, 128],
radiusPixels: 50
pointSize: 50
})
],
goldenImage: './test/render/golden-images/pointcloud-identity.png'
Expand Down Expand Up @@ -350,7 +350,7 @@ export const TEST_CASES = [
id: 'scatterplot-lnglat',
data: dataSamples.points,
getPosition: d => d.COORDINATES,
getColor: d => [255, 128, 0],
getFillColor: d => [255, 128, 0],
getRadius: d => d.SPACES,
opacity: 1,
pickable: true,
Expand All @@ -377,7 +377,7 @@ export const TEST_CASES = [
coordinateSystem: COORDINATE_SYSTEM.LNGLAT_DEPRECATED,
fp64: true,
getPosition: d => d.COORDINATES,
getColor: d => [255, 128, 0],
getFillColor: d => [255, 128, 0],
getRadius: d => d.SPACES,
opacity: 1,
pickable: true,
Expand Down Expand Up @@ -743,7 +743,7 @@ export const TEST_CASES = [
extruded: true,
pickable: true,
opacity: 1,
getColor: g => [245, 166, g.value * 255, 255],
getFillColor: g => [245, 166, g.value * 255, 255],
getElevation: h => h.value * 5000
})
],
Expand All @@ -768,7 +768,7 @@ export const TEST_CASES = [
fp64: true,
pickable: true,
opacity: 1,
getColor: g => [245, 166, g.value * 255, 255],
getFillColor: g => [245, 166, g.value * 255, 255],
getElevation: h => h.value * 5000
})
],
Expand Down Expand Up @@ -860,12 +860,42 @@ export const TEST_CASES = [
pickable: true,
opacity: 1,
getPosition: h => h.centroid,
getColor: h => [48, 128, h.value * 255, 255],
getFillColor: h => [48, 128, h.value * 255, 255],
getElevation: h => h.value * 5000
})
],
goldenImage: './test/render/golden-images/column-lnglat.png'
},
{
name: 'column-lnglat-stroke',
viewState: {
latitude: 37.751537058389985,
longitude: -122.42694203247012,
zoom: 11.5,
pitch: 0,
bearing: 0,
orthographic: true
},
layers: [
new ColumnLayer({
id: 'column-lnglat',
data: dataSamples.hexagons,
radius: 250,
angle: Math.PI / 2,
coverage: 1,
extruded: false,
stroked: true,
pickable: true,
opacity: 1,
lineWidthUnits: 'pixels',
getPosition: h => h.centroid,
getFillColor: h => [48, 128, h.value * 255, 255],
getLineColor: [255, 255, 255],
getLineWidth: 4
})
],
goldenImage: './test/render/golden-images/column-lnglat-stroke.png'
},
{
name: 'hexagon-lnglat',
viewState: {
Expand Down Expand Up @@ -912,7 +942,7 @@ export const TEST_CASES = [
getNormal: d => d.normal,
getColor: d => d.color,
opacity: 1,
radiusPixels: 2,
pointSize: 2,
pickable: true
})
],
Expand Down Expand Up @@ -942,7 +972,7 @@ export const TEST_CASES = [
getNormal: d => d.normal,
getColor: d => d.color,
opacity: 1,
radiusPixels: 2,
pointSize: 2,
pickable: true
})
],
Expand All @@ -967,7 +997,7 @@ export const TEST_CASES = [
getNormal: d => d.normal,
getColor: d => d.color,
opacity: 1,
radiusPixels: 2,
pointSize: 2,
pickable: true
})
],
Expand Down Expand Up @@ -1225,7 +1255,7 @@ export const TEST_CASES = [
new H3HexagonLayer({
data: h3.kRing('882830829bfffff', 4),
getHexagon: d => d,
getColor: (d, {index}) => [255, index * 5, 0],
getFillColor: (d, {index}) => [255, index * 5, 0],
getElevation: (d, {index}) => index * 100
})
],
Expand All @@ -1244,12 +1274,57 @@ export const TEST_CASES = [
new H3HexagonLayer({
data: h3.kRing('891c0000003ffff', 4),
getHexagon: d => d,
getColor: (d, {index}) => [255, index * 5, 0],
getFillColor: (d, {index}) => [255, index * 5, 0],
getElevation: (d, {index}) => index * 10
})
],
goldenImage: './test/render/golden-images/h3-hexagon-high-precision.png'
},
{
name: 'h3-hexagon-layer-flat',
viewState: {
latitude: 37.78,
longitude: -122.45,
zoom: 12,
pitch: 0,
bearing: 0
},
layers: [
new H3HexagonLayer({
data: h3.kRing('882830829bfffff', 4),
getHexagon: d => d,
extruded: false,
stroked: true,
getFillColor: (d, {index}) => [255, index * 5, 0],
getLineColor: [255, 255, 255],
lineWidthMinPixels: 2
})
],
goldenImage: './test/render/golden-images/h3-hexagon-flat.png'
},
{
name: 'h3-hexagon-layer-flat-high-precision',
viewState: {
latitude: 37.78,
longitude: -122.45,
zoom: 12,
pitch: 0,
bearing: 0
},
layers: [
new H3HexagonLayer({
data: h3.kRing('882830829bfffff', 4),
getHexagon: d => d,
extruded: false,
stroked: true,
highPrecision: true,
getFillColor: (d, {index}) => [255, index * 5, 0],
getLineColor: [255, 255, 255],
lineWidthMinPixels: 2
})
],
goldenImage: './test/render/golden-images/h3-hexagon-flat.png'
},
{
name: 'h3-cluster-layer',
viewState: {
Expand Down

0 comments on commit 633551b

Please sign in to comment.