@mapbox/mapbox-gl-style-spec 14.12.0 → 14.13.0

package/util/color.ts

@@ -56,9 +56,9 @@ class Color {
         }
 
         return new Color(
-            rgba[0] / 255 * rgba[3],
-            rgba[1] / 255 * rgba[3],
-            rgba[2] / 255 * rgba[3],
+            rgba[0] / 255,
+            rgba[1] / 255,
+            rgba[2] / 255,
             rgba[3]
         );
     }
@@ -73,16 +73,6 @@ class Color {
      * var translucentGreen = new Color.parse('rgba(26, 207, 26, .73)');
      * translucentGreen.toString(); // = "rgba(26,207,26,0.73)"
      */
-    toStringPremultipliedAlpha(): string {
-        const [r, g, b, a] = this.a === 0 ? [0, 0, 0, 0] : [
-            this.r * 255 / this.a,
-            this.g * 255 / this.a,
-            this.b * 255 / this.a,
-            this.a
-        ];
-        return `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`;
-    }
-
     toString(): string {
         const [r, g, b, a] = [
             this.r,
@@ -93,9 +83,14 @@ class Color {
         return `rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)},${a})`;
     }
 
-    toRenderColor(lut: LUT | null): RenderColor {
+    toNonPremultipliedRenderColor(lut: LUT | null): NonPremultipliedRenderColor {
+        const {r, g, b, a} = this;
+        return new NonPremultipliedRenderColor(lut, r, g, b, a);
+    }
+
+    toPremultipliedRenderColor(lut: LUT | null): NonPremultipliedRenderColor {
         const {r, g, b, a} = this;
-        return new RenderColor(lut, r, g, b, a);
+        return new PremultipliedRenderColor(lut, r * a, g * a, b * a, a);
     }
 
     clone(): Color {
@@ -103,16 +98,16 @@ class Color {
     }
 }
 
-/**
- * Renderable color created from a Color and an optional LUT value
- */
-export class RenderColor {
+export abstract class RenderColor {
+    premultiplied: boolean = false;
+
     r: number;
     g: number;
     b: number;
     a: number;
 
-    constructor(lut: LUT | null, r: number, g: number, b: number, a: number) {
+    constructor(lut: LUT | null, r: number, g: number, b: number, a: number, premultiplied: boolean = false) {
+        this.premultiplied = premultiplied;
         if (!lut) {
             this.r = r;
             this.g = g;
@@ -121,10 +116,18 @@ export class RenderColor {
         } else {
             const N = lut.image.height;
             const N2 = N * N;
+
             // Normalize to cube dimensions.
-            r = a === 0 ? 0 : (r / a) * (N - 1);
-            g = a === 0 ? 0 : (g / a) * (N - 1);
-            b = a === 0 ? 0 : (b / a) * (N - 1);
+
+            if (this.premultiplied) {
+                r = a === 0 ? 0 : (r / a) * (N - 1);
+                g = a === 0 ? 0 : (g / a) * (N - 1);
+                b = a === 0 ? 0 : (b / a) * (N - 1);
+            } else {
+                r = r * (N - 1);
+                g = g * (N - 1);
+                b = b * (N - 1);
+            }
 
             // Determine boundary values for the cube the color is in.
             const r0 = Math.floor(r);
@@ -159,54 +162,59 @@ export class RenderColor {
                     lerp(data[i2], data[i3], bw), gw),
                 lerp(
                     lerp(data[i4], data[i5], bw),
-                    lerp(data[i6], data[i7], bw), gw), rw) / 255 * a;
+                    lerp(data[i6], data[i7], bw), gw), rw) / 255 * (this.premultiplied ? a : 1);
             this.g = lerp(
                 lerp(
                     lerp(data[i0 + 1], data[i1 + 1], bw),
                     lerp(data[i2 + 1], data[i3 + 1], bw), gw),
                 lerp(
                     lerp(data[i4 + 1], data[i5 + 1], bw),
-                    lerp(data[i6 + 1], data[i7 + 1], bw), gw), rw) / 255 * a;
+                    lerp(data[i6 + 1], data[i7 + 1], bw), gw), rw) / 255 * (this.premultiplied ? a : 1);
             this.b = lerp(
                 lerp(
                     lerp(data[i0 + 2], data[i1 + 2], bw),
                     lerp(data[i2 + 2], data[i3 + 2], bw), gw),
                 lerp(
                     lerp(data[i4 + 2], data[i5 + 2], bw),
-                    lerp(data[i6 + 2], data[i7 + 2], bw), gw), rw) / 255 * a;
+                    lerp(data[i6 + 2], data[i7 + 2], bw), gw), rw) / 255 * (this.premultiplied ? a : 1);
             this.a = a;
         }
     }
 
     /**
-     * Returns an RGBA array of values representing the color, unpremultiplied by A.
-     *
+     * Returns an RGBA array of values representing the color.
      * @returns An array of RGBA color values in the range [0, 255].
      */
     toArray(): [number, number, number, number] {
         const {r, g, b, a} = this;
-        return a === 0 ? [0, 0, 0, 0] : [
-            r * 255 / a,
-            g * 255 / a,
-            b * 255 / a,
+
+        return [
+            r * 255,
+            g * 255,
+            b * 255,
             a
         ];
+
     }
 
     /**
      * Returns an HSLA array of values representing the color, unpremultiplied by A.
-     *
      * @returns An array of HSLA color values.
      */
     toHslaArray(): [number, number, number, number] {
-        if (this.a === 0) {
-            return [0, 0, 0, 0];
+        let {r, g, b, a} = this;
+
+        if (this.premultiplied) {
+            if (a === 0) return [0, 0, 0, 0];
+
+            r /= a;
+            g /= a;
+            b /= a;
         }
-        const {r, g, b, a} = this;
 
-        const red = Math.min(Math.max(r / a, 0.0), 1.0);
-        const green = Math.min(Math.max(g / a, 0.0), 1.0);
-        const blue = Math.min(Math.max(b / a, 0.0), 1.0);
+        const red = Math.min(Math.max(r, 0.0), 1.0);
+        const green = Math.min(Math.max(g, 0.0), 1.0);
+        const blue = Math.min(Math.max(b, 0.0), 1.0);
 
         const min = Math.min(red, green, blue);
         const max = Math.max(red, green, blue);
@@ -241,16 +249,17 @@ export class RenderColor {
     }
 
     /**
-     * Returns a RGBA array of float values representing the color, unpremultiplied by A.
+     * Returns a RGBA array of float values representing the color.
      *
      * @returns An array of RGBA color values in the range [0, 1].
      */
     toArray01(): [number, number, number, number] {
         const {r, g, b, a} = this;
-        return a === 0 ? [0, 0, 0, 0] : [
-            r / a,
-            g / a,
-            b / a,
+
+        return [
+            r,
+            g,
+            b,
             a
         ];
     }
@@ -262,46 +271,53 @@ export class RenderColor {
      * @returns An array of RGB color values in the range [0, 1].
      */
     toArray01Scaled(scale: number): [number, number, number] {
-        const {r, g, b, a} = this;
-        return a === 0 ? [0, 0, 0] : [
-            (r / a) * scale,
-            (g / a) * scale,
-            (b / a) * scale
-        ];
-    }
+        const {r, g, b} = this;
 
-    /**
-     * Returns an RGBA array of values representing the color, premultiplied by A.
-     *
-     * @returns An array of RGBA color values in the range [0, 1].
-     */
-    toArray01PremultipliedAlpha(): [number, number, number, number] {
-        const {r, g, b, a} = this;
         return [
-            r,
-            g,
-            b,
-            a
+            r * scale,
+            g * scale,
+            b * scale
         ];
     }
 
     /**
-     * Returns an RGBA array of values representing the color, unpremultiplied by A, and converted to linear color space.
-     * The color is defined by sRGB primaries, but the sRGB transfer function is reversed to obtain linear energy.
-     *
+     * Returns an RGBA array of values representing the color converted to linear color space.
+     * The color is defined by sRGB primaries, but the sRGB transfer function
+     * is reversed to obtain linear energy.
      * @returns An array of RGBA color values in the range [0, 1].
      */
     toArray01Linear(): [number, number, number, number] {
         const {r, g, b, a} = this;
-        return a === 0 ? [0, 0, 0, 0] : [
-            Math.pow((r / a), 2.2),
-            Math.pow((g / a), 2.2),
-            Math.pow((b / a), 2.2),
+
+        return [
+            Math.pow(r, 2.2),
+            Math.pow(g, 2.2),
+            Math.pow(b, 2.2),
             a
         ];
     }
 }
 
+/**
+ * Renderable color created from a Color and an optional LUT value.
+ * Represent a color value with non-premultiplied alpha.
+ */
+export class NonPremultipliedRenderColor extends RenderColor {
+    constructor(lut: LUT | null, r: number, g: number, b: number, a: number) {
+        super(lut, r, g, b, a, false);
+    }
+}
+
+/**
+ * Renderable color created from a Color and an optional LUT value.
+ * Represent a color value with premultiplied alpha.
+ */
+export class PremultipliedRenderColor extends RenderColor {
+    constructor(lut: LUT | null, r: number, g: number, b: number, a: number) {
+        super(lut, r, g, b, a, true);
+    }
+}
+
 Color.black = new Color(0, 0, 0, 1);
 Color.white = new Color(1, 1, 1, 1);
 Color.transparent = new Color(0, 0, 0, 0);

package/util/interpolate.ts

@@ -18,7 +18,3 @@ export function array(from: Array<number>, to: Array<number>, t: number): Array<
         return number(d, to[i], t);
     });
 }
-
-export function easeIn(x: number) {
-    return x * x * x * x * x;
-}

package/validate/validate_lights.ts

@@ -70,7 +70,26 @@ export default function validateLights(options: Options): Array<ValidationError>
                 return errors;
             }
             for (const propertyKey in properties) {
-                if (!lightPropertySpec[propertyKey]) {
+                const transitionMatch = propertyKey.match(/^(.*)-transition$/);
+                const useThemeMatch = propertyKey.match(/^(.*)-use-theme$/);
+
+                if (useThemeMatch && lightPropertySpec[useThemeMatch[1]]) {
+                    errors = errors.concat(validate({
+                        key,
+                        value: properties[propertyKey],
+                        valueSpec: {type: 'string'},
+                        style,
+                        styleSpec
+                    }));
+                } else if (transitionMatch && lightPropertySpec[transitionMatch[1]] && lightPropertySpec[transitionMatch[1]].transition) {
+                    errors = errors.concat(validate({
+                        key,
+                        value: light[key],
+                        valueSpec: styleSpec.transition,
+                        style,
+                        styleSpec
+                    }));
+                } else if (!lightPropertySpec[propertyKey]) {
                     errors = errors.concat([new ValidationWarning(options.key, properties[propertyKey], `unknown property "${propertyKey}"`)]);
                 } else {
                     errors = errors.concat(validate({
@@ -83,26 +102,7 @@ export default function validateLights(options: Options): Array<ValidationError>
                 }
             }
         } else {
-            const transitionMatch = key.match(/^(.*)-transition$/);
-            const useThemeMatch = key.match(/^(.*)-use-theme$/);
-
-            if (useThemeMatch && lightSpec[useThemeMatch[1]]) {
-                errors = errors.concat(validate({
-                    key,
-                    value: light[key],
-                    valueSpec: {type: 'string'},
-                    style,
-                    styleSpec
-                }));
-            } else if (transitionMatch && lightSpec[transitionMatch[1]] && lightSpec[transitionMatch[1]].transition) {
-                errors = errors.concat(validate({
-                    key,
-                    value: light[key],
-                    valueSpec: styleSpec.transition,
-                    style,
-                    styleSpec
-                }));
-            } else if (lightSpec[key]) {
+            if (lightSpec[key]) {
                 errors = errors.concat(validate({
                     key,
                     value: light[key],