Website updates

Author: tschaub

dist/en/main/examples/common.js

@@ -941,6 +941,7 @@ declare namespace ol {
         export { _ol_transform$composeCssTransform as composeCssTransform };
         export { _ol_transform$create as create };
         export { _ol_transform$determinant as determinant };
+        export { _ol_transform$equivalent as equivalent };
         export { _ol_transform$invert as invert };
         export { _ol_transform$makeInverse as makeInverse };
         export { _ol_transform$makeScale as makeScale };
@@ -1763,6 +1764,7 @@ import { compose as _ol_transform$compose } from '../../ol/transform.js';
 import { composeCssTransform as _ol_transform$composeCssTransform } from '../../ol/transform.js';
 import { create as _ol_transform$create } from '../../ol/transform.js';
 import { determinant as _ol_transform$determinant } from '../../ol/transform.js';
+import { equivalent as _ol_transform$equivalent } from '../../ol/transform.js';
 import { invert as _ol_transform$invert } from '../../ol/transform.js';
 import { makeInverse as _ol_transform$makeInverse } from '../../ol/transform.js';
 import { makeScale as _ol_transform$makeScale } from '../../ol/transform.js';

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

@@ -73,7 +73,7 @@ declare class CanvasLayerRenderer<LayerType extends import("../../layer/Layer.js
     /**
      * Get a rendering container from an existing target, if compatible.
      * @param {HTMLElement} target Potential render target.
-     * @param {string} transform CSS Transform.
+     * @param {string} transform CSS transform matrix.
      * @param {string} [backgroundColor] Background color.
      */
     useContainer(target: HTMLElement, transform: string, backgroundColor?: string): void;

dist/en/main/examples/offscreen-canvas.worker.worker.js.map

@@ -19,6 +19,7 @@ import {
   apply as applyTransform,
   compose as composeTransform,
   create as createTransform,
+  equivalent,
   makeInverse,
   toString as toTransformString,
 } from '../../transform.js';
@@ -150,7 +151,7 @@ class CanvasLayerRenderer extends LayerRenderer {
   /**
    * Get a rendering container from an existing target, if compatible.
    * @param {HTMLElement} target Potential render target.
-   * @param {string} transform CSS Transform.
+   * @param {string} transform CSS transform matrix.
    * @param {string} [backgroundColor] Background color.
    */
   useContainer(target, transform, backgroundColor) {
@@ -172,7 +173,7 @@ class CanvasLayerRenderer extends LayerRenderer {
         context = canvas.getContext('2d');
       }
     }
-    if (context && context.canvas.style.transform === transform) {
+    if (context && equivalent(context.canvas.style.transform, transform)) {
       // Container of the previous layer renderer can be used.
       this.container = target;
       this.context = context;

dist/en/main/ol/dist/ol.d.ts

@@ -127,12 +127,19 @@ export function makeInverse(target: Transform, source: Transform): Transform;
  */
 export function determinant(mat: Transform): number;
 /**
- * A rounded string version of the transform.  This can be used
+ * A matrix string version of the transform.  This can be used
  * for CSS transforms.
  * @param {!Transform} mat Matrix.
  * @return {string} The transform as a string.
  */
 export function toString(mat: Transform): string;
+/**
+ * Compare two matrices for equality.
+ * @param {!string} cssTransform1 A CSS transform matrix string.
+ * @param {!string} cssTransform2 A CSS transform matrix string.
+ * @return {boolean} The two matrices are equal.
+ */
+export function equivalent(cssTransform1: string, cssTransform2: string): boolean;
 /**
  * An array representing an affine 2d transformation for use with
  * {@link module :ol/transform} functions. The array has 6 elements.

dist/en/main/ol/dist/ol.js

@@ -267,23 +267,42 @@ export function determinant(mat) {
 /**
  * @type {Array}
  */
-const matrixPrecision = [1e6, 1e6, 1e6, 1e6, 2, 2];
+const matrixPrecision = [1e5, 1e5, 1e5, 1e5, 2, 2];
 
 /**
- * A rounded string version of the transform.  This can be used
+ * A matrix string version of the transform.  This can be used
  * for CSS transforms.
  * @param {!Transform} mat Matrix.
  * @return {string} The transform as a string.
  */
 export function toString(mat) {
-  const transformString =
-    'matrix(' +
-    mat
-      .map(
-        (value, i) =>
-          Math.round(value * matrixPrecision[i]) / matrixPrecision[i],
-      )
-      .join(', ') +
-    ')';
+  const transformString = 'matrix(' + mat.join(', ') + ')';
   return transformString;
 }
+
+/**
+ * Create a transform from a CSS transform matrix string.
+ * @param {string} cssTransform The CSS string to parse.
+ * @return {!Transform} The transform.
+ */
+function fromString(cssTransform) {
+  const values = cssTransform.substring(7, cssTransform.length - 1).split(',');
+  return values.map(parseFloat);
+}
+
+/**
+ * Compare two matrices for equality.
+ * @param {!string} cssTransform1 A CSS transform matrix string.
+ * @param {!string} cssTransform2 A CSS transform matrix string.
+ * @return {boolean} The two matrices are equal.
+ */
+export function equivalent(cssTransform1, cssTransform2) {
+  const mat1 = fromString(cssTransform1);
+  const mat2 = fromString(cssTransform2);
+  for (let i = 0; i < 6; ++i) {
+    if (Math.round((mat1[i] - mat2[i]) * matrixPrecision[i]) !== 0) {
+      return false;
+    }
+  }
+  return true;
+}