Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added new numSegments prop in ArcLayer #8055

Merged
merged 5 commits into from
Aug 29, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
21 changes: 16 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,12 @@ 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 (
changeFlags.extensionsChanged ||
(changeFlags.propsChanged && props.numSegments !== oldProps.numSegments)
) {
const {gl} = this.context;
this.state.model?.delete();
this.state.model = this._getModel(gl);
Expand All @@ -251,22 +262,22 @@ export default class ArcLayer<DataT = any, ExtraPropsT extends {} = {}> extends
}

protected _getModel(gl: WebGLRenderingContext): 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(gl, {
...this.getShaders(),
id: this.props.id,
id,
geometry: new Geometry({
drawMode: GL.TRIANGLE_STRIP,
attributes: {
Expand All @@ -276,7 +287,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'
}
];
Loading