Website updates

Author: tschaub

dist/en/main/apidoc/module-ol_color.html

@@ -189,7 +189,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/color.js">color.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/color.js#L135">line 135</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/color.js#L294">line 294</a>
         </div>
 
     </div>
@@ -331,7 +331,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/color.js">color.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/color.js#L32">line 32</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/color.js#L135">line 135</a>
         </div>
 
     </div>

dist/en/main/examples/common.js

@@ -35,12 +35,6 @@ export function fromString(s: string): Color;
  * @api
  */
 export function asArray(color: Color | string): Color;
-/**
- * Exported for the tests.
- * @param {Color} color Color.
- * @return {Color} Clamped color.
- */
-export function normalize(color: Color): Color;
 /**
  * @param {Color} color Color.
  * @return {string} String.

dist/en/main/examples/common.js.map

@@ -1,11 +1,8 @@
 /**
  * @module ol/color
  */
-import parseRgba from 'color-rgba';
-import lchuv from 'color-space/lchuv.js';
-import rgb from 'color-space/rgb.js';
-import xyz from 'color-space/xyz.js';
-import {clamp} from './math.js';
+import {createCanvasContext2D} from './dom.js';
+import {clamp, toFixed} from './math.js';
 
 /**
  * A color represented as a short array [red, green, blue, alpha].
@@ -23,6 +20,112 @@ import {clamp} from './math.js';
  */
 export const NO_COLOR = [NaN, NaN, NaN, 0];
 
+let colorParseContext;
+/**
+ * @return {CanvasRenderingContext2D} The color parse context
+ */
+function getColorParseContext() {
+  if (!colorParseContext) {
+    colorParseContext = createCanvasContext2D(1, 1, undefined, {
+      willReadFrequently: true,
+      desynchronized: true,
+    });
+  }
+  return colorParseContext;
+}
+
+const rgbModernRegEx =
+  /^rgba?\(\s*(\d+%?)\s+(\d+%?)\s+(\d+%?)(?:\s*\/\s*(\d+%|\d*\.\d+|[01]))?\s*\)$/i;
+const rgbLegacyAbsoluteRegEx =
+  /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(\d+%|\d*\.\d+|[01]))?\s*\)$/i;
+const rgbLegacyPercentageRegEx =
+  /^rgba?\(\s*(\d+%)\s*,\s*(\d+%)\s*,\s*(\d+%)(?:\s*,\s*(\d+%|\d*\.\d+|[01]))?\s*\)$/i;
+const hexRegEx = /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i;
+
+/**
+ * @param {string} s Color component as number or percentage.
+ * @param {number} divider Divider for percentage.
+ * @return {number} Color component.
+ */
+function toColorComponent(s, divider) {
+  return s.endsWith('%')
+    ? Number(s.substring(0, s.length - 1)) / divider
+    : Number(s);
+}
+
+/**
+ * @param {string} color Color string.
+ */
+function throwInvalidColor(color) {
+  throw new Error('failed to parse "' + color + '" as color');
+}
+
+/**
+ * @param {string} color Color string.
+ * @return {Color} RGBa color array.
+ */
+function parseRgba(color) {
+  // Fast lane for rgb(a) colors
+  if (color.toLowerCase().startsWith('rgb')) {
+    const rgb =
+      color.match(rgbLegacyAbsoluteRegEx) ||
+      color.match(rgbModernRegEx) ||
+      color.match(rgbLegacyPercentageRegEx);
+    if (rgb) {
+      const alpha = rgb[4];
+      const rgbDivider = 100 / 255;
+      return [
+        clamp((toColorComponent(rgb[1], rgbDivider) + 0.5) | 0, 0, 255),
+        clamp((toColorComponent(rgb[2], rgbDivider) + 0.5) | 0, 0, 255),
+        clamp((toColorComponent(rgb[3], rgbDivider) + 0.5) | 0, 0, 255),
+        alpha !== undefined ? clamp(toColorComponent(alpha, 100), 0, 1) : 1,
+      ];
+    }
+    throwInvalidColor(color);
+  }
+  // Fast lane for hex colors (also with alpha)
+  if (color.startsWith('#')) {
+    if (hexRegEx.test(color)) {
+      const hex = color.substring(1);
+      const step = hex.length <= 4 ? 1 : 2;
+      const colorFromHex = [0, 0, 0, 255];
+      for (let i = 0, ii = hex.length; i < ii; i += step) {
+        let colorComponent = parseInt(hex.substring(i, i + step), 16);
+        if (step === 1) {
+          colorComponent += colorComponent << 4;
+        }
+        colorFromHex[i / step] = colorComponent;
+      }
+      colorFromHex[3] = colorFromHex[3] / 255;
+      return colorFromHex;
+    }
+    throwInvalidColor(color);
+  }
+  // Use canvas color serialization to parse the color into hex or rgba
+  // See https://www.w3.org/TR/2021/SPSD-2dcontext-20210128/#serialization-of-a-color
+  const context = getColorParseContext();
+  context.fillStyle = '#abcdef';
+  let invalidCheckFillStyle = context.fillStyle;
+  context.fillStyle = color;
+  if (context.fillStyle === invalidCheckFillStyle) {
+    context.fillStyle = '#fedcba';
+    invalidCheckFillStyle = context.fillStyle;
+    context.fillStyle = color;
+    if (context.fillStyle === invalidCheckFillStyle) {
+      throwInvalidColor(color);
+    }
+  }
+  const colorString = context.fillStyle;
+  if (colorString.startsWith('#') || colorString.startsWith('rgba')) {
+    return parseRgba(colorString);
+  }
+  context.clearRect(0, 0, 1, 1);
+  context.fillRect(0, 0, 1, 1);
+  const colorFromImage = Array.from(context.getImageData(0, 0, 1, 1).data);
+  colorFromImage[3] = toFixed(colorFromImage[3] / 255, 3);
+  return colorFromImage;
+}
+
 /**
  * Return the color as an rgba string.
  * @param {Color|string} color Color.
@@ -69,24 +172,81 @@ export function withAlpha(color) {
   return output;
 }
 
+// The functions b1, b2, a1, a2, rgbaToLcha and lchaToRgba below are adapted from
+// https://stackoverflow.com/a/67219995/2389327
+
+/**
+ * @param {number} v Input value.
+ * @return {number} Output value.
+ */
+function b1(v) {
+  return v > 0.0031308 ? Math.pow(v, 1 / 2.4) * 269.025 - 14.025 : v * 3294.6;
+}
+
+/**
+ * @param {number} v Input value.
+ * @return {number} Output value.
+ */
+function b2(v) {
+  return v > 0.2068965 ? Math.pow(v, 3) : (v - 4 / 29) * (108 / 841);
+}
+
+/**
+ * @param {number} v Input value.
+ * @return {number} Output value.
+ */
+function a1(v) {
+  return v > 10.314724 ? Math.pow((v + 14.025) / 269.025, 2.4) : v / 3294.6;
+}
+
+/**
+ * @param {number} v Input value.
+ * @return {number} Output value.
+ */
+function a2(v) {
+  return v > 0.0088564 ? Math.pow(v, 1 / 3) : v / (108 / 841) + 4 / 29;
+}
+
 /**
  * @param {Color} color RGBA color.
  * @return {Color} LCHuv color with alpha.
  */
 export function rgbaToLcha(color) {
-  const output = xyz.lchuv(rgb.xyz(color));
-  output[3] = color[3];
-  return output;
+  const r = a1(color[0]);
+  const g = a1(color[1]);
+  const b = a1(color[2]);
+  const y = a2(r * 0.222488403 + g * 0.716873169 + b * 0.06060791);
+  const l = 500 * (a2(r * 0.452247074 + g * 0.399439023 + b * 0.148375274) - y);
+  const q = 200 * (y - a2(r * 0.016863605 + g * 0.117638439 + b * 0.865350722));
+  const h = Math.atan2(q, l) * (180 / Math.PI);
+  return [
+    116 * y - 16,
+    Math.sqrt(l * l + q * q),
+    h < 0 ? h + 360 : h,
+    color[3],
+  ];
 }
 
 /**
  * @param {Color} color LCHuv color with alpha.
  * @return {Color} RGBA color.
  */
 export function lchaToRgba(color) {
-  const output = xyz.rgb(lchuv.xyz(color));
-  output[3] = color[3];
-  return output;
+  const l = (color[0] + 16) / 116;
+  const c = color[1];
+  const h = (color[2] * Math.PI) / 180;
+  const y = b2(l);
+  const x = b2(l + (c / 500) * Math.cos(h));
+  const z = b2(l - (c / 200) * Math.sin(h));
+  const r = b1(x * 3.021973625 - y * 1.617392459 - z * 0.404875592);
+  const g = b1(x * -0.943766287 + y * 1.916279586 + z * 0.027607165);
+  const b = b1(x * 0.069407491 - y * 0.22898585 + z * 1.159737864);
+  return [
+    clamp((r + 0.5) | 0, 0, 255),
+    clamp((g + 0.5) | 0, 0, 255),
+    clamp((b + 0.5) | 0, 0, 255),
+    color[3],
+  ];
 }
 
 /**
@@ -112,14 +272,13 @@ export function fromString(s) {
 
   const color = parseRgba(s);
   if (color.length !== 4) {
-    throw new Error('failed to parse "' + s + '" as color');
+    throwInvalidColor(s);
   }
   for (const c of color) {
     if (isNaN(c)) {
-      throw new Error('failed to parse "' + s + '" as color');
+      throwInvalidColor(s);
     }
   }
-  normalize(color);
   cache[s] = color;
   ++cacheSize;
   return color;
@@ -139,19 +298,6 @@ export function asArray(color) {
   return fromString(color);
 }
 
-/**
- * Exported for the tests.
- * @param {Color} color Color.
- * @return {Color} Clamped color.
- */
-export function normalize(color) {
-  color[0] = clamp((color[0] + 0.5) | 0, 0, 255);
-  color[1] = clamp((color[1] + 0.5) | 0, 0, 255);
-  color[2] = clamp((color[2] + 0.5) | 0, 0, 255);
-  color[3] = clamp(color[3], 0, 1);
-  return color;
-}
-
 /**
  * @param {Color} color Color.
  * @return {string} String.

dist/en/main/examples/export-map.js

@@ -48,7 +48,6 @@ declare namespace ol {
         export { _ol_color$fromString as fromString };
         export { _ol_color$isStringColor as isStringColor };
         export { _ol_color$lchaToRgba as lchaToRgba };
-        export { _ol_color$normalize as normalize };
         export { _ol_color$rgbaToLcha as rgbaToLcha };
         export { _ol_color$toString as toString };
         export { _ol_color$withAlpha as withAlpha };
@@ -1065,7 +1064,6 @@ import { asString as _ol_color$asString } from '../../ol/color.js';
 import { fromString as _ol_color$fromString } from '../../ol/color.js';
 import { isStringColor as _ol_color$isStringColor } from '../../ol/color.js';
 import { lchaToRgba as _ol_color$lchaToRgba } from '../../ol/color.js';
-import { normalize as _ol_color$normalize } from '../../ol/color.js';
 import { rgbaToLcha as _ol_color$rgbaToLcha } from '../../ol/color.js';
 import { toString as _ol_color$toString } from '../../ol/color.js';
 import { withAlpha as _ol_color$withAlpha } from '../../ol/color.js';