Support visibility in clip-layer (internal-9237)

GitOrigin-RevId: 30bf83053e59386fcb0680d67b25194b6210b125

Author: aleksproger

src/render/painter.ts

@@ -938,15 +938,22 @@ class Painter {
                         // This order is later used by fill-extrusion and instanced tree's rendering code to know
                         // how to deal with landmarks.
                             order = layerIdx;
-                            for (const mask of layer.layout.get('clip-layer-types')) {
-                                clipMask |= (mask === 'model' ? LayerTypeMask.Model : (mask === 'symbol' ? LayerTypeMask.Symbol : LayerTypeMask.FillExtrusion));
-                            }
-                            for (const scope of layer.layout.get('clip-layer-scope')) {
-                                clipScope.push(scope);
-                            }
                             if (layer.isHidden(this.transform.zoom)) {
                                 addToSources = false;
                             } else {
+                                // Hidden layers may not have been recalculated this frame, so `layer.layout`
+                                // can be undefined. Only access evaluated layout when we know the clip layer
+                                // is active for this frame.
+                                if (!layer.layout) {
+                                    addToSources = false;
+                                    continue;
+                                }
+                                for (const mask of layer.layout.get('clip-layer-types')) {
+                                    clipMask |= (mask === 'model' ? LayerTypeMask.Model : (mask === 'symbol' ? LayerTypeMask.Symbol : LayerTypeMask.FillExtrusion));
+                                }
+                                for (const scope of layer.layout.get('clip-layer-scope')) {
+                                    clipScope.push(scope);
+                                }
                                 clippingActiveThisFrame = true;
                             }
                         }

src/style-spec/reference/v8.json

@@ -1904,6 +1904,30 @@
         "interpolated": false
       },
       "property-type": "data-constant"
+    },
+    "visibility": {
+      "type": "enum",
+      "values": {
+        "visible": {
+          "doc": "The layer is shown."
+        },
+        "none": {
+          "doc": "The layer is not shown."
+        }
+      },
+      "default": "visible",
+      "doc": "Whether this layer is displayed.",
+      "sdk-support": {
+        "basic functionality": {
+          "js": "3.18.0",
+          "android": "11.18.0",
+          "ios": "11.18.0"
+        }
+      },
+      "expression": {
+        "interpolated": false
+      },
+      "property-type": "data-constant"
     }
   },
   "layout_fill": {

src/style-spec/types.ts

@@ -1533,7 +1533,8 @@ export type ClipLayerSpecification = {
     "filter"?: FilterSpecification,
     "layout"?: {
         "clip-layer-types"?: Array<"model" | "symbol"> | ExpressionSpecification,
-        "clip-layer-scope"?: Array<string> | ExpressionSpecification
+        "clip-layer-scope"?: Array<string> | ExpressionSpecification,
+        "visibility"?: "visible" | "none" | ExpressionSpecification
     },
     /**
      * @experimental This property is experimental and subject to change in future versions.

src/style/style_layer.ts

@@ -218,7 +218,7 @@ class StyleLayer extends Evented {
 
     possiblyEvaluateVisibility() {
         if (!this._unevaluatedLayout._values.visibility) {
-            // Early return for layers which don't have a visibility property, like clip-layer
+            // Early return for layers which don't have a visibility property.
             return;
         }
         // @ts-expect-error - TS2322 - Type 'unknown' is not assignable to type '"none" | "visible"'. | TS2345 - Argument of type '{ zoom: number; }' is not assignable to parameter of type 'EvaluationParameters'.

src/style/style_layer/clip_style_layer_properties.ts

@@ -19,11 +19,13 @@ import type {StylePropertySpecification} from '../../style-spec/style-spec';
 export type LayoutProps = {
     "clip-layer-types": DataConstantProperty<Array<"model" | "symbol">>;
     "clip-layer-scope": DataConstantProperty<Array<string>>;
+    "visibility": DataConstantProperty<"visible" | "none">;
 };
 let layout: Properties<LayoutProps>;
 export const getLayoutProperties = (): Properties<LayoutProps> => layout || (layout = new Properties({
     "clip-layer-types": new DataConstantProperty(styleSpec["layout_clip"]["clip-layer-types"]),
     "clip-layer-scope": new DataConstantProperty(styleSpec["layout_clip"]["clip-layer-scope"]),
+    "visibility": new DataConstantProperty(styleSpec["layout_clip"]["visibility"]),
 }));
 
 export type PaintProps = {};

test/unit/style/style_layer.test.ts

@@ -207,6 +207,20 @@ describe('StyleLayer#setLayoutProperty', () => {
         layer.setLayoutProperty('visibility', 'none');
         expect(layer.getLayoutProperty('visibility')).toEqual('none');
     });
+
+    test('updates visibility for clip layer', () => {
+        const layer = createStyleLayer({
+            id: 'clip',
+            type: 'clip',
+            source: 'composite',
+            layout: {
+                visibility: 'none'
+            }
+        });
+
+        expect(layer.getLayoutProperty('visibility')).toEqual('none');
+        expect(layer.isHidden(0)).toBeTruthy();
+    });
 });
 
 describe('StyleLayer#serialize', () => {