Skip to content

Commit

Permalink
Added new numSegments prop in ArcLayer (#8055)
Browse files Browse the repository at this point in the history
  • Loading branch information
karsta26 authored and Pessimistress committed Aug 29, 2023
1 parent 04d066d commit bf8484c
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 7 deletions.
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ deck.gl development is governed by the vis.gl Technical Steering Committee (TSC)

Maintainers of deck.gl have commit access to this GitHub repository, and take part in the decision making process.

If you are interested in becoming a maintainer, read the [governance guidelines](https://github.com/visgl/tsc/tree/master/developer-process/governance.md).
If you are interested in becoming a maintainer, read the [governance guidelines](https://github.com/visgl/tsc/blob/master/governance.md).

The vis.gl TSC meets monthly and publishes meeting notes via a [mailing list](https://lists.uc.foundation/g/visgl).
This mailing list can also be utilized to reach out to the TSC.
Expand Down
6 changes: 6 additions & 0 deletions docs/api-reference/layers/arc-layer.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,12 @@ Inherits from all [Base Layer](../core/layer.md) properties.

If `true`, create the arc along the shortest path on the earth surface. This option is only effective with data in the `LNGLAT` coordinate system.

##### `numSegments` (Number, optional) {#numSegments}

* Default: `50`

The number of segments used to draw each arc. This prop can be used to make arcs smooth when using `greatCircle` with long paths.

##### `widthUnits` (String, optional) {#widthunits}

* Default: `'pixels'`
Expand Down
2 changes: 1 addition & 1 deletion docs/api-reference/test-utils/snapshot-test-runner.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ Whether the test is being run in headless mode. In headless mode, Chromium uses

## Image Diff Options

The test renderer and each test case may choose to override the default image diffing options. The following options from [captureAndDiffScreen](https://uber-web.github.io/probe.gl/docs/api-reference/test-utils/browser-test-driver#browsertestdriver_captureanddiffscreenoptions--object) are supported:
The test renderer and each test case may choose to override the default image diffing options. The following options from [captureAndDiffScreen](https://github.com/uber-web/probe.gl/blob/master/docs/modules/test-utils/browser-test-driver.md#browsertestdriver_captureanddiffscreenoptions--object) are supported:

* `tolerance`
* `threshold`
Expand Down
18 changes: 13 additions & 5 deletions modules/layers/src/arc-layer/arc-layer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const defaultProps: DefaultProps<ArcLayerProps> = {
getTilt: {type: 'accessor', value: 0},

greatCircle: false,
numSegments: {type: 'number', value: 50, min: 1},

widthUnits: 'pixels',
widthScale: {type: 'number', value: 1, min: 0},
Expand All @@ -71,6 +72,12 @@ type _ArcLayerProps<DataT> = {
*/
greatCircle?: boolean;

/**
* The number of segments used to draw each arc.
* @default 50
*/
numSegments?: number;

/**
* The units of the line width, one of `'meters'`, `'common'`, and `'pixels'`
* @default 'pixels'
Expand Down Expand Up @@ -224,8 +231,9 @@ export default class ArcLayer<DataT = any, ExtraPropsT extends {} = {}> extends

updateState(opts: UpdateParameters<this>): void {
super.updateState(opts);
const {props, oldProps, changeFlags} = opts;
// Re-generate model if geometry changed
if (opts.changeFlags.extensionsChanged) {
if (opts.changeFlags.extensionsChanged || props.numSegments !== oldProps.numSegments) {
this.state.model?.destroy();
this.state.model = this._getModel();
this.getAttributeManager()!.invalidateAll();
Expand All @@ -250,22 +258,22 @@ export default class ArcLayer<DataT = any, ExtraPropsT extends {} = {}> extends
}

protected _getModel(): Model {
const {id, numSegments} = this.props;
let positions: number[] = [];
const NUM_SEGMENTS = 50;
/*
* (0, -1)-------------_(1, -1)
* | _,-" |
* o _,-" o
* | _,-" |
* (0, 1)"-------------(1, 1)
*/
for (let i = 0; i < NUM_SEGMENTS; i++) {
for (let i = 0; i < numSegments; i++) {
positions = positions.concat([i, 1, 0, i, -1, 0]);
}

const model = new Model(this.context.device, {
...this.getShaders(),
id: this.props.id,
id,
geometry: new Geometry({
drawMode: GL.TRIANGLE_STRIP,
attributes: {
Expand All @@ -275,7 +283,7 @@ export default class ArcLayer<DataT = any, ExtraPropsT extends {} = {}> extends
isInstanced: true
});

model.setUniforms({numSegments: NUM_SEGMENTS});
model.setUniforms({numSegments});

return model;
}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions test/render/test-cases/arc-layer.js
Original file line number Diff line number Diff line change
Expand Up @@ -209,5 +209,30 @@ export default [
})
],
goldenImage: './test/render/golden-images/great-circle.png'
},
{
name: 'great-circle-modified-segments',
viewState: {
latitude: 0,
longitude: 0,
zoom: 0,
pitch: 0,
bearing: 0
},
layers: [
new ArcLayer({
id: 'great-circle-modified-segments',
data: [{source: [64, 17], target: [-112, 7]}],
getWidth: 5,
getHeight: 0,
greatCircle: true,
numSegments: 150,
getSourcePosition: d => d.source,
getTargetPosition: d => d.target,
getSourceColor: [64, 255, 0],
getTargetColor: [0, 128, 200]
})
],
goldenImage: './test/render/golden-images/great-circle-modified-segments.png'
}
];

0 comments on commit bf8484c

Please sign in to comment.