Move types, clean imports, move interpolate method (#903)

Author: HarelM

src/expression/compound_expression.ts

@@ -27,8 +27,9 @@ import type {Expression, ExpressionRegistry} from './expression';
 import type {Value} from './values';
 import type {Type} from './types';
 
-import {typeOf, Color, validateRGBA, toString as valueToString} from './values';
+import {typeOf, validateRGBA, toString as valueToString} from './values';
 import RuntimeError from './runtime_error';
+import Color from './types/color';
 
 export type Varargs = {
     type: Type;

src/expression/definitions/coercion.ts

@@ -1,8 +1,11 @@
 import {BooleanType, ColorType, NumberType, StringType, ValueType} from '../types';
-import {Color, Padding, VariableAnchorOffsetCollection, toString as valueToString, validateRGBA} from '../values';
+import {toString as valueToString, validateRGBA} from '../values';
 import RuntimeError from '../runtime_error';
 import Formatted from '../types/formatted';
 import ResolvedImage from '../types/resolved_image';
+import Color from '../types/color';
+import Padding from '../types/padding';
+import VariableAnchorOffsetCollection from '../types/variable_anchor_offset_collection';
 
 import type {Expression} from '../expression';
 import type ParsingContext from '../parsing_context';

src/expression/definitions/interpolate.ts

@@ -1,6 +1,5 @@
 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 {findStopLessThanOrEqualTo} from '../stops';
 
@@ -9,6 +8,10 @@ import type {Expression} from '../expression';
 import type ParsingContext from '../parsing_context';
 import type EvaluationContext from '../evaluation_context';
 import type {Type} from '../types';
+import Color from '../types/color';
+import {interpolateArray, interpolateNumber} from '../../util/interpolate-primitives';
+import Padding from '../types/padding';
+import VariableAnchorOffsetCollection from '../types/variable_anchor_offset_collection';
 
 export type InterpolationType = {
     name: 'linear';
@@ -173,11 +176,22 @@ class Interpolate implements Expression {
 
         switch (this.operator) {
             case 'interpolate':
-                return interpolate[this.type.kind](outputLower, outputUpper, t);
+                switch (this.type.kind) {
+                    case 'number':
+                        return interpolateNumber(outputLower, outputUpper, t)
+                    case 'color':
+                        return Color.interpolate(outputLower, outputUpper, t);
+                    case 'padding':
+                        return Padding.interpolate(outputLower, outputUpper, t);
+                    case 'variableAnchorOffsetCollection':
+                        return VariableAnchorOffsetCollection.interpolate(outputLower, outputUpper, t);
+                    case 'array':
+                        return interpolateArray(outputLower, outputUpper, t);
+                }
             case 'interpolate-hcl':
-                return interpolate.color(outputLower, outputUpper, t, 'hcl');
+                return Color.interpolate(outputLower, outputUpper, t, 'hcl');
             case 'interpolate-lab':
-                return interpolate.color(outputLower, outputUpper, t, 'lab');
+                return Color.interpolate(outputLower, outputUpper, t, 'lab');
         }
     }
 
@@ -242,3 +256,11 @@ function exponentialInterpolation(input, base, lowerValue, upperValue) {
 }
 
 export default Interpolate;
+
+export const interpolateFactory = {
+    color: Color.interpolate,
+    number: interpolateNumber,
+    padding: Padding.interpolate,
+    variableAnchorOffsetCollection: VariableAnchorOffsetCollection.interpolate,
+    array: interpolateArray
+}

src/expression/evaluation_context.ts

@@ -1,8 +1,8 @@
-import {Color} from './values';
 import type {FormattedSection} from './types/formatted';
 import type {GlobalProperties, Feature, FeatureState} from './index';
 import {ICanonicalTileID} from '../tiles_and_coordinates';
 import {hasMultipleOuterRings} from '../util/classify_rings';
+import Color from './types/color';
 
 const geometryTypes = ['Unknown', 'Point', 'LineString', 'Polygon'];
 const simpleGeometryType = {
@@ -84,7 +84,7 @@ class EvaluationContext {
     parseColor(input: string): Color {
         let cached = this._parseColorCache[input];
         if (!cached) {
-            cached = this._parseColorCache[input] = Color.parse(input) as Color;
+            cached = this._parseColorCache[input] = Color.parse(input);
         }
         return cached;
     }

src/expression/expression.test.ts

@@ -3,8 +3,8 @@ import definitions from './definitions';
 import v8 from '../reference/v8.json' with {type: 'json'};
 import {createExpression, ICanonicalTileID, StyleExpression, StylePropertySpecification} from '..';
 import ParsingError from './parsing_error';
-import {VariableAnchorOffsetCollection} from './values';
 import {getGeometry} from '../../test/lib/geometry';
+import VariableAnchorOffsetCollection from './types/variable_anchor_offset_collection';
 
 // filter out internal "error" and "filter-*" expressions from definition list
 const filterExpressionRegex = /filter-/;

src/expression/index.ts

@@ -20,16 +20,22 @@ import RuntimeError from './runtime_error';
 import {success, error} from '../util/result';
 import {supportsPropertyExpression, supportsZoomExpression, supportsInterpolation} from '../util/properties';
 
-import type {Type, EvaluationKind} from './types';
+import {ColorType, StringType, NumberType, BooleanType, ValueType, FormattedType, PaddingType, ResolvedImageType, VariableAnchorOffsetCollectionType, array, type Type, type EvaluationKind} from './types';
 import type {Value} from './values';
 import type {Expression} from './expression';
 import type {StylePropertySpecification} from '..';
 import type {Result} from '../util/result';
 import type {InterpolationType} from './definitions/interpolate';
-import type {PropertyValueSpecification, VariableAnchorOffsetCollectionSpecification} from '../types.g';
+import type {PaddingSpecification, PropertyValueSpecification, VariableAnchorOffsetCollectionSpecification} from '../types.g';
 import type {FormattedSection} from './types/formatted';
 import type {Point2D} from '../point2d';
 
+import {ICanonicalTileID} from '../tiles_and_coordinates';
+import {isFunction, createFunction} from '../function';
+import Color from './types/color';
+import Padding from './types/padding';
+import VariableAnchorOffsetCollection from './types/variable_anchor_offset_collection';
+
 export type Feature = {
     readonly type: 0 | 1 | 2 | 3 | 'Unknown' | 'Point' | 'MultiPoint' | 'LineString' | 'MultiLineString' | 'Polygon' | 'MultiPolygon';
     readonly id?: any;
@@ -333,9 +339,6 @@ export function createPropertyExpression(expressionInput: unknown, propertySpec:
         (new ZoomDependentExpression('composite', expression.value, zoomCurve.labels, interpolationType) as CompositeExpression));
 }
 
-import {isFunction, createFunction} from '../function';
-import {Color, VariableAnchorOffsetCollection} from './values';
-
 // serialization wrapper for old-style stop functions normalized to the
 // expression interface
 export class StylePropertyFunction<T> {
@@ -388,7 +391,7 @@ export function normalizePropertyExpression<T>(
         if (specification.type === 'color' && typeof value === 'string') {
             constant = Color.parse(value);
         } else if (specification.type === 'padding' && (typeof value === 'number' || Array.isArray(value))) {
-            constant = Padding.parse(value as (number | number[]));
+            constant = Padding.parse(value as PaddingSpecification);
         } else if (specification.type === 'variableAnchorOffsetCollection' && Array.isArray(value)) {
             constant = VariableAnchorOffsetCollection.parse(value as VariableAnchorOffsetCollectionSpecification);
         }
@@ -440,10 +443,6 @@ function findZoomCurve(expression: Expression): Step | Interpolate | ExpressionP
     return result;
 }
 
-import {ColorType, StringType, NumberType, BooleanType, ValueType, FormattedType, PaddingType, ResolvedImageType, VariableAnchorOffsetCollectionType, array} from './types';
-import Padding from '../util/padding';
-import {ICanonicalTileID} from '../tiles_and_coordinates';
-
 function getExpectedType(spec: StylePropertySpecification): Type {
     const types = {
         color: ColorType,

src/util/interpolate.test.ts renamed to src/expression/types/color.test.ts

@@ -1,21 +1,55 @@
-import {expectToMatchColor} from '../../test/lib/util';
-import interpolate, {isSupportedInterpolationColorSpace} from './interpolate';
-import Color from './color';
-import Padding from './padding';
-import VariableAnchorOffsetCollection from './variable_anchor_offset_collection';
-
-describe('interpolate', () => {
-
-    test('interpolate number', () => {
-        expect(interpolate.number(-5, 5, 0.00)).toBe(-5.0);
-        expect(interpolate.number(-5, 5, 0.25)).toBe(-2.5);
-        expect(interpolate.number(-5, 5, 0.50)).toBe(0);
-        expect(interpolate.number(-5, 5, 0.75)).toBe(2.5);
-        expect(interpolate.number(-5, 5, 1.00)).toBe(5.0);
-
-        expect(interpolate.number(0, 1, 0.5)).toBe(0.5);
-        expect(interpolate.number(-10, -5, 0.5)).toBe(-7.5);
-        expect(interpolate.number(5, 10, 0.5)).toBe(7.5);
+import {expectCloseToArray, expectToMatchColor} from '../../../test/lib/util';
+import Color, {isSupportedInterpolationColorSpace} from './color';
+
+describe('Color class', () => {
+
+    describe('parsing', () => {
+
+        test('should parse valid css color strings', () => {
+            expectToMatchColor(Color.parse('RED'), 'rgb(100% 0% 0% / 1)');
+            expectToMatchColor(Color.parse('#f00C'), 'rgb(100% 0% 0% / .8)');
+            expectToMatchColor(Color.parse('rgb(0 0 127.5 / 20%)'), 'rgb(0% 0% 50% / .2)');
+            expectToMatchColor(Color.parse('hsl(300deg 100% 25.1% / 0.7)'), 'rgb(50.2% 0% 50.2% / .7)');
+        });
+
+        test('should return undefined when provided with invalid CSS color string', () => {
+            expect(Color.parse(undefined)).toBeUndefined();
+            expect(Color.parse(null)).toBeUndefined();
+            expect(Color.parse('#invalid')).toBeUndefined();
+            expect(Color.parse('$123')).toBeUndefined();
+            expect(Color.parse('0F91')).toBeUndefined();
+            expect(Color.parse('rgb(#123)')).toBeUndefined();
+            expect(Color.parse('hsl(0,0,0)')).toBeUndefined();
+            expect(Color.parse('rgb(0deg,0,0)')).toBeUndefined();
+        });
+
+        test('should accept instances of Color class', () => {
+            const color = new Color(0, 0, 0, 0);
+            expect(Color.parse(color)).toBe(color);
+        });
+
+    });
+
+    test('should keep a reference to the original color when alpha=0', () => {
+        const color = new Color(0, 0, 0.5, 0, false);
+        expect(color).toMatchObject({r: 0, g: 0, b: 0, a: 0});
+        expect(Object.hasOwn(color, 'rgb')).toBe(true);
+        expectCloseToArray(color.rgb, [0, 0, 0.5, 0]);
+    });
+
+    test('should not keep a reference to the original color when alpha!=0', () => {
+        const color = new Color(0, 0, 0.5, 0.001, false);
+        expect(color).toMatchObject({r: 0, g: 0, b: expect.closeTo(0.5 * 0.001, 5), a: 0.001});
+        expect(Object.hasOwn(color, 'rgb')).toBe(false);
+    });
+
+    test('should serialize to rgba format', () => {
+        expect(`${new Color(1, 1, 0, 1, false)}`).toBe('rgba(255,255,0,1)');
+        expect(`${new Color(0.2, 0, 1, 0.3, false)}`).toBe('rgba(51,0,255,0.3)');
+        expect(`${new Color(1, 1, 0, 0, false)}`).toBe('rgba(255,255,0,0)');
+        expect(`${Color.parse('purple')}`).toBe('rgba(128,0,128,1)');
+        expect(`${Color.parse('rgba(26,207,26,.73)')}`).toBe('rgba(26,207,26,0.73)');
+        expect(`${Color.parse('rgba(26,207,26,0)')}`).toBe('rgba(26,207,26,0)');
     });
 
     describe('interpolation color space', () => {
@@ -44,7 +78,7 @@ describe('interpolate', () => {
             const color = Color.parse('rgba(0,0,255,1)');
             const targetColor = Color.parse('rgba(0,255,0,.6)');
 
-            const i11nFn = (t: number) => interpolate.color(color, targetColor, t, 'rgb');
+            const i11nFn = (t: number) => Color.interpolate(color, targetColor, t, 'rgb');
             expectToMatchColor(i11nFn(0.00), 'rgb(0% 0% 100% / 1)');
             expectToMatchColor(i11nFn(0.25), 'rgb(0% 25% 75% / 0.9)');
             expectToMatchColor(i11nFn(0.50), 'rgb(0% 50% 50% / 0.8)');
@@ -56,7 +90,7 @@ describe('interpolate', () => {
             const color = Color.parse('rgba(0,0,255,1)');
             const targetColor = Color.parse('rgba(0,255,0,.6)');
 
-            const i11nFn = (t: number) => interpolate.color(color, targetColor, t, 'hcl');
+            const i11nFn = (t: number) => Color.interpolate(color, targetColor, t, 'hcl');
             expectToMatchColor(i11nFn(0.00), 'rgb(0% 0% 100% / 1)');
             expectToMatchColor(i11nFn(0.25), 'rgb(0% 49.37% 100% / 0.9)', 4);
             expectToMatchColor(i11nFn(0.50), 'rgb(0% 70.44% 100% / 0.8)', 4);
@@ -68,7 +102,7 @@ describe('interpolate', () => {
             const color = Color.parse('rgba(0,0,255,1)');
             const targetColor = Color.parse('rgba(0,255,0,.6)');
 
-            const i11nFn = (t: number) => interpolate.color(color, targetColor, t, 'lab');
+            const i11nFn = (t: number) => Color.interpolate(color, targetColor, t, 'lab');
             expectToMatchColor(i11nFn(0.00), 'rgb(0% 0% 100% / 1)');
             expectToMatchColor(i11nFn(0.25), 'rgb(39.64% 34.55% 83.36% / 0.9)', 4);
             expectToMatchColor(i11nFn(0.50), 'rgb(46.42% 56.82% 65.91% / 0.8)', 4);
@@ -80,7 +114,7 @@ describe('interpolate', () => {
             const color = Color.parse('rgba(0,0,255,0)');
             const targetColor = Color.parse('rgba(0,255,0,1)');
 
-            const i11nFn = (t: number) => interpolate.color(color, targetColor, t, 'rgb');
+            const i11nFn = (t: number) => Color.interpolate(color, targetColor, t, 'rgb');
             expectToMatchColor(i11nFn(0.00), 'rgb(0% 0% 0% / 0)');
             expectToMatchColor(i11nFn(0.25), 'rgb(0% 25% 75% / 0.25)');
             expectToMatchColor(i11nFn(0.50), 'rgb(0% 50% 50% / 0.5)');
@@ -93,7 +127,7 @@ describe('interpolate', () => {
             const targetColor = Color.parse('cyan');
 
             for (const space of ['rgb', 'hcl', 'lab'] as const) {
-                const i11nFn = (t: number) => interpolate.color(color, targetColor, t, space);
+                const i11nFn = (t: number) => Color.interpolate(color, targetColor, t, space);
                 const colorInBetween = i11nFn(0.5);
                 for (const key of ['r', 'g', 'b', 'a'] as const) {
                     expect(colorInBetween[ key ]).toBeGreaterThanOrEqual(0);
@@ -104,31 +138,4 @@ describe('interpolate', () => {
 
     });
 
-    test('interpolate array', () => {
-        expect(interpolate.array([0, 0, 0, 0], [1, 2, 3, 4], 0.5)).toEqual([0.5, 1, 3 / 2, 2]);
-    });
-
-    test('interpolate padding', () => {
-        const padding = new Padding([0, 0, 0, 0]);
-        const targetPadding = new Padding([1, 2, 6, 4]);
-
-        const i11nFn = (t: number) => interpolate.padding(padding, targetPadding, t);
-        expect(i11nFn(0.5)).toBeInstanceOf(Padding);
-        expect(i11nFn(0.5)).toEqual(new Padding([0.5, 1, 3, 2]));
-    });
-
-    describe('interpolate variableAnchorOffsetCollection', () => {
-        const i11nFn = interpolate.variableAnchorOffsetCollection;
-        const parseFn = VariableAnchorOffsetCollection.parse;
-
-        test('should throw with mismatched endpoints', () => {
-            expect(() => i11nFn(parseFn(['top', [0, 0]]), parseFn(['bottom', [1, 1]]), 0.5)).toThrow('Cannot interpolate values containing mismatched anchors. from[0]: top, to[0]: bottom');
-            expect(() => i11nFn(parseFn(['top', [0, 0]]), parseFn(['top', [1, 1], 'bottom', [2, 2]]), 0.5)).toThrow('Cannot interpolate values of different length. from: ["top",[0,0]], to: ["top",[1,1],"bottom",[2,2]]');
-        });
-
-        test('should interpolate offsets', () => {
-            expect(i11nFn(parseFn(['top', [0, 0], 'bottom', [2, 2]]), parseFn(['top', [1, 1], 'bottom', [4, 4]]), 0.5).values).toEqual(['top', [0.5, 0.5], 'bottom', [3, 3]]);
-        });
-    });
-
 });

src/util/color.ts renamed to src/expression/types/color.ts

@@ -1,5 +1,19 @@
-import {HCLColor, LABColor, RGBColor, rgbToHcl, rgbToLab} from './color_spaces';
+import {HCLColor, hclToRgb, LABColor, labToRgb, RGBColor, rgbToHcl, rgbToLab} from './color_spaces';
 import {parseCssColor} from './parse_css_color';
+import {interpolateArray, interpolateNumber} from '../../util/interpolate-primitives';
+
+export type InterpolationColorSpace = 'rgb' | 'hcl' | 'lab';
+
+/**
+ * Checks whether the specified color space is one of the supported interpolation color spaces.
+ *
+ * @param colorSpace Color space key to verify.
+ * @returns `true` if the specified color space is one of the supported
+ * interpolation color spaces, `false` otherwise
+ */
+export function isSupportedInterpolationColorSpace(colorSpace: string): colorSpace is InterpolationColorSpace {
+    return colorSpace === 'rgb' || colorSpace === 'hcl' || colorSpace === 'lab';
+}
 
 /**
  * Color representation used by WebGL.
@@ -144,6 +158,52 @@ class Color {
         return `rgba(${[r, g, b].map(n => Math.round(n * 255)).join(',')},${a})`;
     }
 
+    static interpolate(from: Color, to: Color, t: number, spaceKey: InterpolationColorSpace = 'rgb'): Color {
+        switch (spaceKey) {
+            case 'rgb': {
+                const [r, g, b, alpha] = interpolateArray(from.rgb, to.rgb, t);
+                return new Color(r, g, b, alpha, false);
+            }
+            case 'hcl': {
+                const [hue0, chroma0, light0, alphaF] = from.hcl;
+                const [hue1, chroma1, light1, alphaT] = to.hcl;
+    
+                // https://github.com/gka/chroma.js/blob/cd1b3c0926c7a85cbdc3b1453b3a94006de91a92/src/interpolator/_hsx.js
+                let hue, chroma;
+    
+                if (!isNaN(hue0) && !isNaN(hue1)) {
+                    let dh = hue1 - hue0;
+                    if (hue1 > hue0 && dh > 180) {
+                        dh -= 360;
+                    } else if (hue1 < hue0 && hue0 - hue1 > 180) {
+                        dh += 360;
+                    }
+                    hue = hue0 + t * dh;
+                } else if (!isNaN(hue0)) {
+                    hue = hue0;
+                    if (light1 === 1 || light1 === 0) chroma = chroma0;
+                } else if (!isNaN(hue1)) {
+                    hue = hue1;
+                    if (light0 === 1 || light0 === 0) chroma = chroma1;
+                } else {
+                    hue = NaN;
+                }
+    
+                const [r, g, b, alpha] = hclToRgb([
+                    hue,
+                    chroma ?? interpolateNumber(chroma0, chroma1, t),
+                    interpolateNumber(light0, light1, t),
+                    interpolateNumber(alphaF, alphaT, t),
+                ]);
+                return new Color(r, g, b, alpha, false);
+            }
+            case 'lab': {
+                const [r, g, b, alpha] = labToRgb(interpolateArray(from.lab, to.lab, t));
+                return new Color(r, g, b, alpha, false);
+            }
+        }
+    }
+
 }
 
 Color.black = new Color(0, 0, 0, 1);

src/util/color_spaces.test.ts renamed to src/expression/types/color_spaces.test.ts

@@ -1,4 +1,4 @@
-import {expectCloseToArray} from '../../test/lib/util';
+import {expectCloseToArray} from '../../../test/lib/util';
 import {hclToRgb, hslToRgb, labToRgb, rgbToHcl, rgbToLab} from './color_spaces';
 
 describe('color spaces', () => {