From c738faaa427390a9dccc498d278cb49c277e5d0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Wed, 20 Nov 2024 10:51:55 +0100
Subject: [PATCH] feat(client): Allow layer opacity to be interpolated

---
 client/src/utils/mapbox-deckgl-bridge.ts | 28 ++++++++++++++----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/client/src/utils/mapbox-deckgl-bridge.ts b/client/src/utils/mapbox-deckgl-bridge.ts
index c72dd1c..2436642 100644
--- a/client/src/utils/mapbox-deckgl-bridge.ts
+++ b/client/src/utils/mapbox-deckgl-bridge.ts
@@ -48,24 +48,30 @@ const resolveVisible = (style: LayerConfig["styles"][0]) => {
   return style.layout?.visibility !== "none";
 };
 
-const resolveOpacity = (style: LayerConfig["styles"][0]) => {
+const resolveOpacity = (style: LayerConfig["styles"][0], zoom: number, defaultValue = 1) => {
+  let value: DataDrivenPropertyValueSpecification<number> | undefined;
+
   if (style.type === "fill") {
-    return style.paint?.["fill-opacity"] as number;
+    value = style.paint?.["fill-opacity"] as number;
+  } else if (style.type === "circle") {
+    value = style.paint?.["circle-opacity"] as number;
+  } else if (style.type === "line") {
+    value = style.paint?.["line-opacity"] as number;
+  } else if (style.type === "symbol") {
+    value = style.paint?.["icon-opacity"] as number;
   }
 
-  if (style.type === "circle") {
-    return style.paint?.["circle-opacity"] as number;
+  if (value === undefined) {
+    return defaultValue;
   }
 
-  if (style.type === "line") {
-    return style.paint?.["line-opacity"] as number;
-  }
+  const resolvedValue = resolveMapboxExpression(value, zoom, undefined, "number");
 
-  if (style.type === "symbol") {
-    return style.paint?.["icon-opacity"] as number;
+  if (resolvedValue === null || resolvedValue === undefined) {
+    return defaultValue;
   }
 
-  return 0;
+  return resolvedValue;
 };
 
 const resolveFillColor = (
@@ -232,7 +238,7 @@ const resolveIconSizeScale = (
 export const resolveDeckglProperties = (style: LayerConfig["styles"][0], zoom: number) => {
   const resolvedProperties = {
     visible: resolveVisible(style),
-    opacity: resolveOpacity(style),
+    opacity: resolveOpacity(style, zoom),
     getFillColor: resolveFillColor(style, zoom) as MVTLayerProps["getFillColor"],
     getPointRadius: resolvePointRadius(style, zoom),
     getLineColor: resolveLineColor(style, zoom) as MVTLayerProps["getLineColor"],