Skip to content

Commit 4eb105a

Browse files
mfazekasFl0h0
mfazekas
and
Fl0h0
committed
feat: add line border properties to LineLayer
Co-Authored-By: Fl0h0 <25343805+Fl0h0@users.noreply.github.com>
1 parent 03382dd commit 4eb105a

File tree

7 files changed

+257
-1
lines changed

7 files changed

+257
-1
lines changed

‎android/src/main/java/com/rnmapbox/rnmbx/components/styles/RNMBXStyleFactory.kt‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,14 @@ object RNMBXStyleFactory {
175175
setLineGradient(layer, styleValue)
176176
"lineTrimOffset" ->
177177
setLineTrimOffset(layer, styleValue)
178+
"lineBorderWidth" ->
179+
setLineBorderWidth(layer, styleValue)
180+
"lineBorderWidthTransition" ->
181+
setLineBorderWidthTransition(layer, styleValue)
182+
"lineBorderColor" ->
183+
setLineBorderColor(layer, styleValue)
184+
"lineBorderColorTransition" ->
185+
setLineBorderColorTransition(layer, styleValue)
178186
"lineZOffset" ->
179187
setLineZOffset(layer, styleValue)
180188
"lineElevationReference" ->
@@ -1623,6 +1631,58 @@ object RNMBXStyleFactory {
16231631
}
16241632
}
16251633

1634+
fun setLineBorderWidth(layer: LineLayer, styleValue: RNMBXStyleValue ) {
1635+
if (styleValue.isExpression()) {
1636+
val expression = styleValue.getExpression()
1637+
if (expression != null) {
1638+
layer.lineBorderWidth(expression)
1639+
} else {
1640+
Logger.e("RNMBXLine", "Expression for lineBorderWidth is null")
1641+
}
1642+
} else {
1643+
val value = styleValue.getDouble(VALUE_KEY)
1644+
if (value != null) {
1645+
layer.lineBorderWidth(value)
1646+
} else {
1647+
Logger.e("RNMBXLine", "value for lineBorderWidth is null")
1648+
}
1649+
}
1650+
}
1651+
1652+
1653+
fun setLineBorderWidthTransition(layer: LineLayer, styleValue: RNMBXStyleValue) {
1654+
val transition = styleValue.transition
1655+
if (transition != null) {
1656+
layer.lineBorderWidthTransition(transition);
1657+
}
1658+
}
1659+
1660+
fun setLineBorderColor(layer: LineLayer, styleValue: RNMBXStyleValue ) {
1661+
if (styleValue.isExpression()) {
1662+
val expression = styleValue.getExpression()
1663+
if (expression != null) {
1664+
layer.lineBorderColor(expression)
1665+
} else {
1666+
Logger.e("RNMBXLine", "Expression for lineBorderColor is null")
1667+
}
1668+
} else {
1669+
val value = styleValue.getInt(VALUE_KEY)
1670+
if (value != null) {
1671+
layer.lineBorderColor(value)
1672+
} else {
1673+
Logger.e("RNMBXLine", "value for lineBorderColor is null")
1674+
}
1675+
}
1676+
}
1677+
1678+
1679+
fun setLineBorderColorTransition(layer: LineLayer, styleValue: RNMBXStyleValue) {
1680+
val transition = styleValue.transition
1681+
if (transition != null) {
1682+
layer.lineBorderColorTransition(transition);
1683+
}
1684+
}
1685+
16261686
fun setLineZOffset(layer: LineLayer, styleValue: RNMBXStyleValue ) {
16271687
if (styleValue.isExpression()) {
16281688
val expression = styleValue.getExpression()

‎docs/LineLayer.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,8 @@ Customizable style attributes
161161
* <a href="#linetrimfaderange">lineTrimFadeRange</a><br/>
162162
* <a href="#linetrimcolor">lineTrimColor</a><br/>
163163
* <a href="#lineemissivestrength">lineEmissiveStrength</a><br/>
164+
* <a href="#lineborderwidth">lineBorderWidth</a><br/>
165+
* <a href="#linebordercolor">lineBorderColor</a><br/>
164166
* <a href="#lineocclusionopacity">lineOcclusionOpacity</a><br/>
165167

166168
___
@@ -942,6 +944,87 @@ The transition affecting any changes to this layer’s lineEmissiveStrength prop
942944
`{duration: 300, delay: 0}`
943945

944946

947+
___
948+
949+
### lineBorderWidth
950+
Name: `lineBorderWidth`
951+
952+
Mapbox spec: [line-border-width](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-line-border-width)
953+
954+
#### Description
955+
The width of the line border. A value of zero means no border.
956+
957+
#### Type
958+
`number`
959+
#### Default Value
960+
`0`
961+
962+
#### Minimum
963+
`0`
964+
965+
966+
#### Expression
967+
968+
Parameters: `zoom, feature, feature-state`
969+
___
970+
971+
### lineBorderWidthTransition
972+
Name: `lineBorderWidthTransition`
973+
974+
#### Description
975+
976+
The transition affecting any changes to this layer’s lineBorderWidth property.
977+
978+
#### Type
979+
980+
`{ duration, delay }`
981+
982+
#### Units
983+
`milliseconds`
984+
985+
#### Default Value
986+
`{duration: 300, delay: 0}`
987+
988+
989+
___
990+
991+
### lineBorderColor
992+
Name: `lineBorderColor`
993+
994+
Mapbox spec: [line-border-color](https://docs.mapbox.com/style-spec/reference/layers/#paint-line-line-border-color)
995+
996+
#### Description
997+
The color of the line border. If lineBorderWidth is greater than zero and the alpha value of this color is 0 (default), the color for the border will be selected automatically based on the line color.
998+
999+
#### Type
1000+
`color`
1001+
#### Default Value
1002+
`rgba(0, 0, 0, 0)`
1003+
1004+
1005+
#### Expression
1006+
1007+
Parameters: `zoom, feature, feature-state`
1008+
___
1009+
1010+
### lineBorderColorTransition
1011+
Name: `lineBorderColorTransition`
1012+
1013+
#### Description
1014+
1015+
The transition affecting any changes to this layer’s lineBorderColor property.
1016+
1017+
#### Type
1018+
1019+
`{ duration, delay }`
1020+
1021+
#### Units
1022+
`milliseconds`
1023+
1024+
#### Default Value
1025+
`{duration: 300, delay: 0}`
1026+
1027+
9451028
___
9461029

9471030
### lineOcclusionOpacity

‎docs/docs.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4379,6 +4379,55 @@
43794379
"namespace": "paint"
43804380
}
43814381
},
4382+
{
4383+
"name": "lineBorderWidth",
4384+
"type": "number",
4385+
"values": [],
4386+
"minimum": 0,
4387+
"default": 0,
4388+
"description": "The width of the line border. A value of zero means no border.",
4389+
"requires": [],
4390+
"disabledBy": [],
4391+
"allowedFunctionTypes": [],
4392+
"expression": {
4393+
"interpolated": true,
4394+
"parameters": [
4395+
"zoom",
4396+
"feature",
4397+
"feature-state"
4398+
]
4399+
},
4400+
"transition": true,
4401+
"mbx": {
4402+
"fullName": "paint-line-line-border-width",
4403+
"name": "line-border-width",
4404+
"namespace": "paint"
4405+
}
4406+
},
4407+
{
4408+
"name": "lineBorderColor",
4409+
"type": "color",
4410+
"values": [],
4411+
"default": "rgba(0, 0, 0, 0)",
4412+
"description": "The color of the line border. If lineBorderWidth is greater than zero and the alpha value of this color is 0 (default), the color for the border will be selected automatically based on the line color.",
4413+
"requires": [],
4414+
"disabledBy": [],
4415+
"allowedFunctionTypes": [],
4416+
"expression": {
4417+
"interpolated": true,
4418+
"parameters": [
4419+
"zoom",
4420+
"feature",
4421+
"feature-state"
4422+
]
4423+
},
4424+
"transition": true,
4425+
"mbx": {
4426+
"fullName": "paint-line-line-border-color",
4427+
"name": "line-border-color",
4428+
"namespace": "paint"
4429+
}
4430+
},
43824431
{
43834432
"name": "lineOcclusionOpacity",
43844433
"type": "number",

‎ios/RNMBX/RNMBXStyle.swift‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,14 @@ func lineLayer(layer: inout LineLayer, reactStyle:Dictionary<String, Any>, oldRe
154154
self.setLineGradient(&layer, styleValue:styleValue);
155155
} else if (prop == "lineTrimOffset") {
156156
self.setLineTrimOffset(&layer, styleValue:styleValue);
157+
} else if (prop == "lineBorderWidth") {
158+
self.setLineBorderWidth(&layer, styleValue:styleValue);
159+
} else if (prop == "lineBorderWidthTransition") {
160+
self.setLineBorderWidthTransition(&layer, styleValue:styleValue);
161+
} else if (prop == "lineBorderColor") {
162+
self.setLineBorderColor(&layer, styleValue:styleValue);
163+
} else if (prop == "lineBorderColorTransition") {
164+
self.setLineBorderColorTransition(&layer, styleValue:styleValue);
157165
} else if (prop == "lineZOffset") {
158166
self.setLineZOffset(&layer, styleValue:styleValue);
159167
} else if (prop == "lineElevationReference") {
@@ -1375,6 +1383,34 @@ func setLineTrimOffset(_ layer: inout LineLayer, styleValue: RNMBXStyleValue)
13751383

13761384
}
13771385

1386+
func setLineBorderWidth(_ layer: inout LineLayer, styleValue: RNMBXStyleValue)
1387+
{
1388+
1389+
1390+
layer.lineBorderWidth = styleValue.mglStyleValueNumber();
1391+
1392+
1393+
}
1394+
1395+
func setLineBorderWidthTransition(_ layer: inout LineLayer, styleValue: RNMBXStyleValue)
1396+
{
1397+
layer.lineBorderWidthTransition = styleValue.getTransition();
1398+
}
1399+
1400+
func setLineBorderColor(_ layer: inout LineLayer, styleValue: RNMBXStyleValue)
1401+
{
1402+
1403+
1404+
layer.lineBorderColor = styleValue.mglStyleValueColor();
1405+
1406+
1407+
}
1408+
1409+
func setLineBorderColorTransition(_ layer: inout LineLayer, styleValue: RNMBXStyleValue)
1410+
{
1411+
layer.lineBorderColorTransition = styleValue.getTransition();
1412+
}
1413+
13781414
func setLineZOffset(_ layer: inout LineLayer, styleValue: RNMBXStyleValue)
13791415
{
13801416

‎scripts/autogenHelpers/generateCodeWithEjs.mjs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,12 @@ const UnsupportedProperties = [
331331
'raster-particle-elevation', // should be supported in v11 11.7.0 but it's not yet implemented in SDK
332332
];
333333

334+
// Properties marked as private in the style-spec but supported by native SDKs
335+
const AllowedPrivateProperties = [
336+
'line-border-width',
337+
'line-border-color',
338+
];
339+
334340
/**
335341
*
336342
* @param {string[]|undefined} only
@@ -340,7 +346,7 @@ function isAttrSupported(name, attr, only) {
340346
return false;
341347
}
342348
const support = getAttributeSupport(attr['sdk-support']);
343-
if (attr.private === true) {
349+
if (attr.private === true && !AllowedPrivateProperties.includes(name)) {
344350
return false;
345351
}
346352
if (only != null) {

‎src/utils/MapboxStyles.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -729,6 +729,24 @@ export interface LineLayerStyleProps {
729729
* The line part between [trimStart, trimEnd] will be painted using `lineTrimColor,` which is transparent by default to produce a route vanishing effect. The line trimOff offset is based on the whole line range [0.0, 1.0].
730730
*/
731731
lineTrimOffset?: number[];
732+
/**
733+
* The width of the line border. A value of zero means no border.
734+
*/
735+
lineBorderWidth?: Value<number, ['zoom', 'feature', 'feature-state']>;
736+
737+
/**
738+
* The transition affecting any changes to this layer’s lineBorderWidth property.
739+
*/
740+
lineBorderWidthTransition?: Transition;
741+
/**
742+
* The color of the line border. If lineBorderWidth is greater than zero and the alpha value of this color is 0 (default), the color for the border will be selected automatically based on the line color.
743+
*/
744+
lineBorderColor?: Value<string, ['zoom', 'feature', 'feature-state']>;
745+
746+
/**
747+
* The transition affecting any changes to this layer’s lineBorderColor property.
748+
*/
749+
lineBorderColorTransition?: Transition;
732750
/**
733751
* Vertical offset from ground, in meters. Not supported for globe projection at the moment.
734752
*

‎src/utils/styleMap.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ const styleMap = {
6666
linePattern: StyleTypes.Image,
6767
lineGradient: StyleTypes.Color,
6868
lineTrimOffset: StyleTypes.Constant,
69+
lineBorderWidth: StyleTypes.Constant,
70+
lineBorderWidthTransition: StyleTypes.Transition,
71+
lineBorderColor: StyleTypes.Color,
72+
lineBorderColorTransition: StyleTypes.Transition,
6973
lineZOffset: StyleTypes.Constant,
7074
lineElevationReference: StyleTypes.Enum,
7175
lineCrossSlope: StyleTypes.Constant,

0 commit comments

Comments
 (0)