evaluate visibility expression

maplibre/maplibre-gl-js#6495

Author: melitele

src/expression/visibility.test.js

@@ -0,0 +1,71 @@
+import createVisibilityExpression from './visibility';
+import {describe, test, expect, vi} from 'vitest';
+
+describe('evaluate visibility expression', () => {
+    test('literal values', () => {
+        vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+        expect(createVisibilityExpression('none', {}).evaluate()).toBe('none');
+        expect(console.warn).not.toHaveBeenCalled();
+
+        expect(createVisibilityExpression('visible', {}).evaluate()).toBe('visible');
+        expect(console.warn).not.toHaveBeenCalled();
+    });
+
+    test('global state property as visibility expression', () => {
+        const globalState = {};
+        const value = createVisibilityExpression(['global-state', 'x'], globalState);
+
+        vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+        globalState.x = 'none';
+        expect(value.evaluate()).toBe('none');
+        expect(console.warn).not.toHaveBeenCalled();
+
+        globalState.x = 'visible';
+        expect(value.evaluate()).toBe('visible');
+        expect(console.warn).not.toHaveBeenCalled();
+    });
+
+    test('global state flag as visibility expression', () => {
+        const globalState = {};
+        const value = createVisibilityExpression(['case', ['global-state', 'x'], 'visible', 'none'], globalState);
+
+        vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+        globalState.x = false;
+        expect(value.evaluate()).toBe('none');
+        expect(console.warn).not.toHaveBeenCalled();
+
+        globalState.x = true;
+        expect(value.evaluate()).toBe('visible');
+        expect(console.warn).not.toHaveBeenCalled();
+    });
+
+    test('warns and falls back to default for invalid expression', () => {
+        const value = createVisibilityExpression(['get', 'x'], {});
+
+        vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+        expect(value.evaluate()).toBe('visible');
+        expect(console.warn).toHaveBeenCalledWith('Expected value to be of type string, but found null instead.');
+    });
+
+    test('warns and falls back to default for missing global property', () => {
+        const value = createVisibilityExpression(['global-state', 'x'], {});
+
+        vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+        expect(value.evaluate()).toBe('visible');
+        expect(console.warn).toHaveBeenCalledWith('Expected value to be of type string, but found null instead.');
+    });
+
+    test('warns and falls back to default for invalid global property', () => {
+        const value = createVisibilityExpression(['global-state', 'x'], {x: 'invalid'});
+
+        vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+        expect(value.evaluate()).toBe('visible');
+        expect(console.warn).toHaveBeenCalledWith('Expected value to be one of "visible", "none", but found "invalid" instead.');
+    });
+});

src/expression/visibility.ts

@@ -0,0 +1,43 @@
+import {createExpression, findGlobalStateRefs} from '.';
+import {type GlobalProperties, type StylePropertySpecification} from '..';
+import {type VisibilitySpecification} from '../types.g';
+
+const visibilitySpec: StylePropertySpecification = {
+    type: 'enum',
+    'property-type': 'data-constant',
+    expression: {
+        interpolated: false,
+        parameters: ['global-state']
+    },
+    values: {visible: {}, none: {}},
+    transition: false,
+    default: 'visible'
+};
+
+export default function createVisibility(visibility: VisibilitySpecification, globalState: Record<string, any>) {
+    const expression = {
+        setValue,
+        evaluate: null
+    };
+    setValue(visibility);
+    return expression;
+
+    function setValue(visibility: VisibilitySpecification) {
+        if (visibility === null || visibility === undefined || visibility === 'visible' || visibility === 'none') {
+            expression.evaluate = visibility === 'none' ? () => 'none' : () => 'visible';
+            addGlobalStateRefs(expression);
+            return;
+        }
+
+        const compiled = createExpression(visibility, visibilitySpec, globalState);
+        if (compiled.result === 'error') {
+            throw new Error(compiled.value.map(err => `${err.key}: ${err.message}`).join(', '));
+        }
+        expression.evaluate = () => compiled.value.evaluate({} as GlobalProperties);
+        addGlobalStateRefs(expression, () => findGlobalStateRefs(compiled.value.expression));
+    }
+}
+
+function addGlobalStateRefs(visibility, getGlobalStateRefs: () => Set<string> = () => new Set<string>()) {
+    visibility.getGlobalStateRefs = getGlobalStateRefs;
+}

src/index.ts

@@ -42,6 +42,7 @@ import {validate} from './validate/validate';
 import {migrate} from './migrate';
 import {classifyRings} from './util/classify_rings';
 import {ProjectionDefinition} from './expression/types/projection_definition';
+import createVisibilityExpression from './expression/visibility';
 
 type ExpressionType = 'data-driven' | 'cross-faded' | 'cross-faded-data-driven' | 'color-ramp' | 'data-constant' | 'constant';
 type ExpressionParameters = Array<'zoom' | 'feature' | 'feature-state' | 'heatmap-density' | 'elevation' | 'line-progress' | 'global-state'>;
@@ -203,6 +204,7 @@ export {
     createExpression,
     isFunction, createFunction,
     createPropertyExpression,
+    createVisibilityExpression,
     convertFilter,
     featureFilter,
     typeOf,