From 906f46bc7610f35a70d03e25a93d64b7e5f30268 Mon Sep 17 00:00:00 2001 From: Pavel Chuchuva Date: Fri, 30 Jul 2021 19:13:42 +1000 Subject: [PATCH] Fix lineGradient showing wrong colors (#1471) * Fix lineGradient showing wrong colors `lineMetrics` property was missing. Fixes https://github.com/react-native-mapbox-gl/maps/issues/1272 * Add line gradient example * Re-generate documentation * Update CHANGELOG.md Co-authored-by: Kid Commit <26439946+ferdicus@users.noreply.github.com> --- CHANGELOG.md | 1 + .../styles/sources/RCTMGLShapeSource.java | 9 +++ .../sources/RCTMGLShapeSourceManager.java | 5 ++ docs/ShapeSource.md | 1 + docs/docs.json | 7 ++ .../src/examples/LineLayer/GradientLine.js | 75 +++++++++++++++++++ example/src/scenes/Home.js | 6 ++ index.d.ts | 1 + ios/RCTMGL/RCTMGLShapeSource.h | 1 + ios/RCTMGL/RCTMGLShapeSource.m | 4 + ios/RCTMGL/RCTMGLShapeSourceManager.m | 1 + javascript/components/ShapeSource.js | 8 ++ javascript/components/Style.js | 3 + 13 files changed, 122 insertions(+) create mode 100644 example/src/examples/LineLayer/GradientLine.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 373afc2d5..c0afa3f0c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ Fix crash with missing okhttp dependency ([#1452](https://github.com/react-nativ Move from react-native-testing-library => @testing-library/react-native ([#1453](https://github.com/react-native-mapbox-gl/maps/pull/1453)) Feat(camera): maxBounds/(min|max)ZoomLevel can be updated dynamically ([#1462](https://github.com/react-native-mapbox-gl/maps/pull/1462)) Refactor(example): clean up folder structure ([#1464](https://github.com/react-native-mapbox-gl/maps/pull/1464)) +Fix lineGradient showing wrong colors ([#1471](https://github.com/react-native-mapbox-gl/maps/pull/1471)) Support tintColor on Android ([#1465](https://github.com/react-native-mapbox-gl/maps/pull/1465)) Feat(android): dynamically update tintColor & add example ([#1469](https://github.com/react-native-mapbox-gl/maps/pull/1469) diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSource.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSource.java index b2e36d3ca..75649153a 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSource.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSource.java @@ -48,6 +48,7 @@ public class RCTMGLShapeSource extends RCTSource { private Integer mMaxZoom; private Integer mBuffer; private Double mTolerance; + private Boolean mLineMetrics; private static Bitmap mImagePlaceholder; private List> mImages; @@ -121,6 +122,10 @@ public void setTolerance(double tolerance) { mTolerance = tolerance; } + public void setLineMetrics(boolean lineMetrics) { + mLineMetrics = lineMetrics; + } + public void onPress(OnPressEvent event) { mManager.handleEvent(FeatureClickEvent.makeShapeSourceEvent(this, event)); } @@ -152,6 +157,10 @@ private GeoJsonOptions getOptions() { options.withTolerance(mTolerance.floatValue()); } + if (mLineMetrics != null) { + options.withLineMetrics(mLineMetrics); + } + return options; } diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSourceManager.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSourceManager.java index 88ebfa01a..fd1b1a4d7 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSourceManager.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSourceManager.java @@ -128,6 +128,11 @@ public void setTolerance(RCTMGLShapeSource source, double tolerance) { source.setTolerance(tolerance); } + @ReactProp(name = "lineMetrics") + public void setLineMetrics(RCTMGLShapeSource source, boolean lineMetrics) { + source.setLineMetrics(lineMetrics); + } + @ReactProp(name = "hasPressListener") public void setHasPressListener(RCTMGLShapeSource source, boolean hasPressListener) { source.setHasPressListener(hasPressListener); diff --git a/docs/ShapeSource.md b/docs/ShapeSource.md index 6f8a5141c..557d6cfc8 100644 --- a/docs/ShapeSource.md +++ b/docs/ShapeSource.md @@ -14,6 +14,7 @@ | maxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to create vector tiles.
A greater value produces greater detail at high zoom levels.
The default value is 18. | | buffer | `number` | `none` | `false` | Specifies the size of the tile buffer on each side.
A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.
Larger values produce fewer rendering artifacts near tile edges and slower performance.
The default value is 128. | | tolerance | `number` | `none` | `false` | Specifies the Douglas-Peucker simplification tolerance.
A greater value produces simpler geometries and improves performance.
The default value is 0.375. | +| lineMetrics | `bool` | `none` | `false` | Whether to calculate line distance metrics.
This is required for line layers that specify lineGradient values.
The default value is false. | | onPress | `func` | `none` | `false` | Source press listener, gets called when a user presses one of the children layers only
if that layer has a higher z-index than another source layers | | hitbox | `shape` | `none` | `false` | Overrides the default touch hitbox(44x44 pixels) for the source layers | |   width | `number` | `none` | `true` | `width` of hitbox | diff --git a/docs/docs.json b/docs/docs.json index 1a8dc0a6a..704a99d3f 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -3720,6 +3720,13 @@ "default": "none", "description": "Specifies the Douglas-Peucker simplification tolerance.\nA greater value produces simpler geometries and improves performance.\nThe default value is 0.375." }, + { + "name": "lineMetrics", + "required": false, + "type": "bool", + "default": "none", + "description": "Whether to calculate line distance metrics.\nThis is required for line layers that specify lineGradient values.\nThe default value is false." + }, { "name": "onPress", "required": false, diff --git a/example/src/examples/LineLayer/GradientLine.js b/example/src/examples/LineLayer/GradientLine.js new file mode 100644 index 000000000..a87c67cef --- /dev/null +++ b/example/src/examples/LineLayer/GradientLine.js @@ -0,0 +1,75 @@ +import React from 'react'; +import MapboxGL from '@react-native-mapbox-gl/maps'; + +import sheet from '../../styles/sheet'; + +import BaseExamplePropTypes from '../common/BaseExamplePropTypes'; +import Page from '../common/Page'; + +class GradientLine extends React.Component { + static propTypes = { + ...BaseExamplePropTypes, + }; + + render() { + return ( + + + + + + + + + ); + } +} + +export default GradientLine; diff --git a/example/src/scenes/Home.js b/example/src/scenes/Home.js index e13b6f383..af060f6d7 100644 --- a/example/src/scenes/Home.js +++ b/example/src/scenes/Home.js @@ -41,6 +41,9 @@ import QueryAtPoint from '../examples/FillRasterLayer/QueryAtPoint'; import QueryWithRect from '../examples/FillRasterLayer/QueryWithRect'; import WatercolorRasterTiles from '../examples/FillRasterLayer/WatercolorRasterTiles'; +// LINE LAYER +import GradientLine from '../examples/LineLayer/GradientLine'; + // MAP import ChangeLayerColor from '../examples/Map/ChangeLayerColor'; import CreateOfflineRegion from '../examples/Map/CreateOfflineRegion'; @@ -174,6 +177,9 @@ const Examples = [ ChoroplethLayerByZoomLevel, ), ]), + new ExampleGroup('LineLayer', [ + new ExampleItem('GradientLine', GradientLine), + ]), new ExampleGroup('Annotations', [ new ExampleItem('Show Point Annotation', ShowPointAnnotation), new ExampleItem('Marker View', MarkerView), diff --git a/index.d.ts b/index.d.ts index 0342fbd1a..0320d6737 100644 --- a/index.d.ts +++ b/index.d.ts @@ -827,6 +827,7 @@ export interface ShapeSourceProps extends ViewProps { maxZoomLevel?: number; buffer?: number; tolerance?: number; + lineMetrics?: boolean; images?: { assets?: string[] } & { [key: string]: ImageSourcePropType }; onPress?: (event: OnPressEvent) => void; hitbox?: { diff --git a/ios/RCTMGL/RCTMGLShapeSource.h b/ios/RCTMGL/RCTMGLShapeSource.h index 6c7eab3c3..24a20eb1a 100644 --- a/ios/RCTMGL/RCTMGLShapeSource.h +++ b/ios/RCTMGL/RCTMGLShapeSource.h @@ -25,6 +25,7 @@ @property (nonatomic, strong) NSNumber *maxZoomLevel; @property (nonatomic, strong) NSNumber *buffer; @property (nonatomic, strong) NSNumber *tolerance; +@property (nonatomic, strong) NSNumber *lineMetrics; @property (nonatomic, copy) RCTBubblingEventBlock onPress; @property (nonatomic, assign) BOOL hasPressListener; diff --git a/ios/RCTMGL/RCTMGLShapeSource.m b/ios/RCTMGL/RCTMGLShapeSource.m index c4d42e354..47c2c81fd 100644 --- a/ios/RCTMGL/RCTMGLShapeSource.m +++ b/ios/RCTMGL/RCTMGLShapeSource.m @@ -94,6 +94,10 @@ - (nullable MGLSource*)makeSource options[MGLShapeSourceOptionSimplificationTolerance] = _tolerance; } + if (_lineMetrics != nil) { + options[MGLShapeSourceOptionLineDistanceMetrics] = _lineMetrics; + } + return options; } diff --git a/ios/RCTMGL/RCTMGLShapeSourceManager.m b/ios/RCTMGL/RCTMGLShapeSourceManager.m index 13c362c30..5da98e820 100644 --- a/ios/RCTMGL/RCTMGLShapeSourceManager.m +++ b/ios/RCTMGL/RCTMGLShapeSourceManager.m @@ -26,6 +26,7 @@ @implementation RCTMGLShapeSourceManager RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber) RCT_EXPORT_VIEW_PROPERTY(buffer, NSNumber) RCT_EXPORT_VIEW_PROPERTY(tolerance, NSNumber) +RCT_EXPORT_VIEW_PROPERTY(lineMetrics, NSNumber) RCT_EXPORT_VIEW_PROPERTY(images, NSDictionary) RCT_EXPORT_VIEW_PROPERTY(nativeImages, NSArray) RCT_EXPORT_VIEW_PROPERTY(hasPressListener, BOOL) diff --git a/javascript/components/ShapeSource.js b/javascript/components/ShapeSource.js index 9331ca1bd..fb102f800 100644 --- a/javascript/components/ShapeSource.js +++ b/javascript/components/ShapeSource.js @@ -85,6 +85,13 @@ class ShapeSource extends NativeBridgeComponent(AbstractSource) { */ tolerance: PropTypes.number, + /** + * Whether to calculate line distance metrics. + * This is required for line layers that specify lineGradient values. + * The default value is false. + */ + lineMetrics: PropTypes.bool, + /** * Source press listener, gets called when a user presses one of the children layers only * if that layer has a higher z-index than another source layers @@ -251,6 +258,7 @@ class ShapeSource extends NativeBridgeComponent(AbstractSource) { maxZoomLevel: this.props.maxZoomLevel, buffer: this.props.buffer, tolerance: this.props.tolerance, + lineMetrics: this.props.lineMetrics, onPress: undefined, ref: (nativeRef) => this._setNativeRef(nativeRef), onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined, diff --git a/javascript/components/Style.js b/javascript/components/Style.js index dff57eb17..57608554a 100644 --- a/javascript/components/Style.js +++ b/javascript/components/Style.js @@ -169,6 +169,9 @@ function getShapeSource(id, source) { if (source.tolerance !== undefined) { sourceProps.tolerance = source.tolerance; } + if (source.lineMetrics !== undefined) { + sourceProps.lineMetrics = source.lineMetrics; + } return ; }