work on style projection expression

Author: birkskyum

src/expression/definitions/interpolate.ts

@@ -1,7 +1,7 @@
 import UnitBezier from '@mapbox/unitbezier';
 
 import interpolate from '../../util/interpolate';
-import {array, ArrayType, ColorType, ColorTypeT, NumberType, NumberTypeT, PaddingType, PaddingTypeT, VariableAnchorOffsetCollectionType, VariableAnchorOffsetCollectionTypeT, toString, verifyType} from '../types';
+import {array, ArrayType, ColorType, ProjectionTypeT, ColorTypeT, NumberType, NumberTypeT, PaddingType, PaddingTypeT, VariableAnchorOffsetCollectionType, VariableAnchorOffsetCollectionTypeT, toString, verifyType, ProjectionType} from '../types';
 import {findStopLessThanOrEqualTo} from '../stops';
 
 import type {Stops} from '../stops';
@@ -19,18 +19,18 @@ export type InterpolationType = {
     name: 'cubic-bezier';
     controlPoints: [number, number, number, number];
 };
-type InterpolatedValueType = NumberTypeT | ColorTypeT | PaddingTypeT | VariableAnchorOffsetCollectionTypeT | ArrayType<NumberTypeT>;
+type InterpolatedValueType = NumberTypeT | ColorTypeT | ProjectionTypeT | PaddingTypeT | VariableAnchorOffsetCollectionTypeT | ArrayType<NumberTypeT>;
 
 class Interpolate implements Expression {
     type: InterpolatedValueType;
 
-    operator: 'interpolate' | 'interpolate-hcl' | 'interpolate-lab';
+    operator: 'interpolate' | 'interpolate-hcl' | 'interpolate-lab' | 'interpolate-projection';
     interpolation: InterpolationType;
     input: Expression;
     labels: Array<number>;
     outputs: Array<Expression>;
 
-    constructor(type: InterpolatedValueType, operator: 'interpolate' | 'interpolate-hcl' | 'interpolate-lab', interpolation: InterpolationType, input: Expression, stops: Stops) {
+    constructor(type: InterpolatedValueType, operator: 'interpolate' | 'interpolate-hcl' | 'interpolate-lab' | 'interpolate-projection', interpolation: InterpolationType, input: Expression, stops: Stops) {
         this.type = type;
         this.operator = operator;
         this.interpolation = interpolation;
@@ -135,6 +135,7 @@ class Interpolate implements Expression {
 
         if (!verifyType(outputType, NumberType) &&
             !verifyType(outputType, ColorType) &&
+            !verifyType(outputType, ProjectionType) &&
             !verifyType(outputType, PaddingType) &&
             !verifyType(outputType, VariableAnchorOffsetCollectionType) &&
             !verifyType(outputType, array(NumberType))
@@ -174,6 +175,8 @@ class Interpolate implements Expression {
         switch (this.operator) {
             case 'interpolate':
                 return interpolate[this.type.kind](outputLower, outputUpper, t);
+            case 'interpolate-projection':
+                return interpolate.projection(outputLower, outputUpper, t);
             case 'interpolate-hcl':
                 return interpolate.color(outputLower, outputUpper, t, 'hcl');
             case 'interpolate-lab':

src/expression/types.ts

@@ -13,6 +13,9 @@ export type BooleanTypeT = {
 export type ColorTypeT = {
     kind: 'color';
 };
+export type ProjectionTypeT = {
+    kind: 'string';
+};
 export type ObjectTypeT = {
     kind: 'object';
 };
@@ -40,7 +43,7 @@ export type VariableAnchorOffsetCollectionTypeT = {
 
 export type EvaluationKind = 'constant' | 'source' | 'camera' | 'composite';
 
-export type Type = NullTypeT | NumberTypeT | StringTypeT | BooleanTypeT | ColorTypeT | ObjectTypeT | ValueTypeT |
+export type Type = NullTypeT | NumberTypeT | StringTypeT | BooleanTypeT | ColorTypeT | ProjectionTypeT | ObjectTypeT | ValueTypeT |
 ArrayType | ErrorTypeT | CollatorTypeT | FormattedTypeT | PaddingTypeT | ResolvedImageTypeT | VariableAnchorOffsetCollectionTypeT;
 
 export interface ArrayType<T extends Type = Type> {
@@ -56,6 +59,7 @@ export const NumberType = {kind: 'number'} as NumberTypeT;
 export const StringType = {kind: 'string'} as StringTypeT;
 export const BooleanType = {kind: 'boolean'} as BooleanTypeT;
 export const ColorType = {kind: 'color'} as ColorTypeT;
+export const ProjectionType = {kind: 'string'} as ProjectionTypeT;
 export const ObjectType = {kind: 'object'} as ObjectTypeT;
 export const ValueType = {kind: 'value'} as ValueTypeT;
 export const ErrorType = {kind: 'error'} as ErrorTypeT;
@@ -90,6 +94,7 @@ const valueMemberTypes = [
     StringType,
     BooleanType,
     ColorType,
+    ProjectionType,
     FormattedType,
     ObjectType,
     array(ValueType),

src/util/interpolate.ts

@@ -4,6 +4,7 @@ import Padding from './padding';
 import VariableAnchorOffsetCollection from './variable_anchor_offset_collection';
 import RuntimeError from '../expression/runtime_error';
 import {VariableAnchorOffsetCollectionSpecification} from '../types.g';
+import {Projection} from './projection';
 
 export type InterpolationColorSpace = 'rgb' | 'hcl' | 'lab';
 
@@ -37,6 +38,10 @@ function number(from: number, to: number, t: number): number {
     return from + t * (to - from);
 }
 
+function projection(from: string, to: string, interpolation: number): Projection {
+    return new Projection({from, to, interpolation});
+}
+
 function color(from: Color, to: Color, t: number, spaceKey: InterpolationColorSpace = 'rgb'): Color {
     switch (spaceKey) {
         case 'rgb': {
@@ -122,6 +127,7 @@ function variableAnchorOffsetCollection(from: VariableAnchorOffsetCollection, to
 const interpolate = {
     number,
     color,
+    projection,
     array,
     padding,
     variableAnchorOffsetCollection

src/util/projection.test.ts

@@ -0,0 +1,20 @@
+import {Projection} from './projection';
+
+enum Proj {
+    Mercator = 'mercator',
+    Globe = 'globe'
+}
+
+describe('Projection class', () => {
+
+    test('should serialize transition to string format', () => {
+        expect(`${new Projection({from: Proj.Mercator, to: Proj.Globe, interpolation: 0.2})}`).toBe('["mercator-to-globe", 0.2]');
+        expect(`${new Projection({from: Proj.Globe, to: Proj.Mercator, interpolation: 0.1})}`).toBe('["globe-to-mercator", 0.1]'); 
+    });
+    
+    test('should serialize single projection to string format', () => {
+        expect(`${new Projection({projection: Proj.Mercator})}`).toBe('["mercator", 1]');
+        expect(`${new Projection({projection: Proj.Globe})}`).toBe('["globe", 1]');
+    });
+
+});

src/util/projection.ts

@@ -0,0 +1,20 @@
+export class Projection {
+    projection: string;
+    interpolation;
+
+    constructor(params: {projection: string} | { from: string; to: string; interpolation: number}) {
+        
+        if ('projection' in params) {
+            this.projection = params.projection;
+            this.interpolation = 1;
+        } else {
+            const {from, to, interpolation} = params;
+            this.projection = `${from}-to-${to}`;
+            this.interpolation = interpolation;
+        }
+    }
+
+    toString(): string {
+        return `["${this.projection}", ${this.interpolation}]`;
+    }
+}

src/validate/validate_projection.test.ts

@@ -41,5 +41,17 @@ describe('Validate projection', () => {
         errors = validateProjection({validateSpec, value: {type: 'mercator'}, styleSpec: v8, style: {} as any});
         expect(errors).toHaveLength(0);
     });
+    test('Should pass if everything is according to spec', () => {
+        let errors = validateProjection({validateSpec, value: {type: ['interpolate', ['linear'], ['zoom'], 0, 'globe', 10, 'globe', 12, 'mercator']}, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(0);
+        errors = validateProjection({validateSpec, value: {type: 'mercator'}, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(0);
+    });
+    test('Should not pass unknown proj', () => {
+        let errors = validateProjection({validateSpec, value: {type: ['interpolate', ['linear'], ['zoom'], 0, 'unknown', 10, 'globe', 12, 'mercator']}, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(0);
+        errors = validateProjection({validateSpec, value: {type: 'mercator'}, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(0);
+    });
 
 });