[GLJS-1191] Support vector icons color parameters with alpha values (internal-2233)

Co-authored-by: Danil Ilinykh <danil.ilinykh@mapbox.com>

Author: 2 people

src/data/usvg/usvg_pb_renderer.ts

@@ -35,7 +35,7 @@ function getStyleColor(iconColor: Color, opacity: number = 255, colorReplacement
     const serializedColor = iconColor.toStringPremultipliedAlpha();
     const color = colorReplacements.has(serializedColor) ? colorReplacements.get(serializedColor).clone() : iconColor.clone();
 
-    color.a = alpha;
+    color.a *= alpha;
 
     return color.toString();
 }

src/style-spec/expression/definitions/image.ts

@@ -167,17 +167,7 @@ export default class ImageExpression implements Expression {
             for (const key in params) {
                 if (params[key]) {
                     try {
-                        const color = params[key].evaluate(ctx);
-                        const msg = `Ignoring image parameter "${key}" with semi-transparent color ${color.toString()}`;
-
-                        if (color.a !== 1) {
-                            if (!this._imageWarnHistory[msg]) {
-                                console.warn(msg);
-                                this._imageWarnHistory[msg] = true;
-                            }
-                            continue;
-                        }
-                        result[key] = color;
+                        result[key] = params[key].evaluate(ctx);
                     } catch (err) {
                         continue;
                     }

test/integration/expression-tests/image/options/one-image/test.json

@@ -3,6 +3,8 @@
   "inputs": [
     [{}, {}],
     [{}, {"properties": {"main_color": "violet"}}],
+    [{}, {"properties": {"main_color": "rgba(255, 0, 0, 0.5)"}}],
+    [{}, {"properties": {"main_color": "rgba(0, 255, 255, 0)"}}],
     [{}, {"properties": {"main_color": 42}}]
   ],
   "expected": {
@@ -15,6 +17,8 @@
     "outputs": [
       {"primaryId": {"name": "poi_circle"}, "available": false},
       {"primaryId": {"name": "poi_circle"}, "primaryOptions": {"params": {"fill_color": {"r":0.9333333333333333,"g":0.5098039215686274,"b":0.9333333333333333,"a":1}}}, "available": false},
+      {"primaryId": {"name": "poi_circle"}, "primaryOptions": {"params": {"fill_color": {"r":0.5,"g":0,"b":0,"a":0.5}}}, "available": false},
+      {"primaryId": {"name": "poi_circle"}, "primaryOptions": {"params": {"fill_color": {"r":0,"g":0,"b":0,"a":0}}}, "available": false},
       {"primaryId": {"name": "poi_circle"}, "available": false}
     ],
     "serialized": ["image", "poi_circle", {"params": {"fill_color": ["to-color", ["get", "main_color"]]}}]

test/integration/expression-tests/image/options/options-for-both-images/test.json

@@ -18,7 +18,7 @@
     [{}, {"properties": {"alternative_color": "blue"}}],
     [{}, {"properties": {"main_color": "violet", "alternative_color": 42}}],
     [{}, {"properties": {"main_color": 42, "alternative_color": "blue"}}],
-    [{}, {"properties": {"main_color": "violet", "alternative_color": "blue"}}]
+    [{}, {"properties": {"main_color": "rgba(255, 0, 0, 0.5)", "alternative_color": "rgba(0, 255, 255, 0)"}}]
   ],
   "expected": {
     "compiled": {
@@ -55,9 +55,9 @@
       },
       {
         "primaryId": {"name": "poi_circle", "iconsetId": "landmarks"},
-        "primaryOptions": {"params": {"fill_color": {"r":0.9333333333333333,"g":0.5098039215686274,"b":0.9333333333333333,"a":1}}},
+        "primaryOptions": {"params": {"fill_color": {"r":0.5,"g":0,"b":0,"a":0.5}}},
         "secondaryId": {"name": "poi_circle", "iconsetId": "alternative_landmarks"},
-        "secondaryOptions": {"params": {"fill_color": {"r":0,"g":0,"b":1,"a":1}}},
+        "secondaryOptions": {"params": {"fill_color": {"r":0,"g":0,"b":0,"a":0}}},
         "available": false
       }
     ],

test/integration/render-tests/icon-image/params/transparent-color/expected.png

@@ -0,0 +1,53 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "spriteFormat": "icon_set",
+      "width": 128,
+      "height": 64,
+      "allowed": 0.006
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [
+          0,
+          0
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/colored",
+  "layers": [
+    {
+      "id": "orig",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": ["image", "colored"],
+        "icon-offset": [-25, 0]
+      }
+    },
+    {
+      "id": "colored",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": ["image", "colored",
+          {
+            "params": {
+              "color0": "rgba(255, 0, 0, 0)",
+              "color1": "rgba(255, 255, 0, 0.5)",
+              "color2": "rgba(0, 0, 0, 0)",
+              "color3": "rgba(0, 0, 255, 0.5)"
+            }
+          }
+        ],
+        "icon-offset": [25, 0]
+      }
+    }
+  ]
+}