fix(ui): Add workaround for DOMMatrix.invertSelf() issues with Chrome…

… 107++
Hypfer · Oct 29, 2022 · 46ed757 · 46ed757
1 parent 552e312
commit 46ed757
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/frontend/src/map/Map.tsx b/frontend/src/map/Map.tsx
@@ -480,7 +480,7 @@ class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
 
             const currentTransform = this.ctxWrapper.getTransform();
             const currentPixelSize = this.structureManager.getPixelSize();
-            const invertedCurrentTransform = DOMMatrix.fromMatrix(this.ctxWrapper.getTransform()).invertSelf();
+            const invertedCurrentTransform = this.ctxWrapper.getInvertedTransform();
 
             const wasHandled = this.structureManager.getClientStructures().some(structure => {
                 const result = structure.translate(

diff --git a/frontend/src/map/structures/client_structures/ClientStructure.ts b/frontend/src/map/structures/client_structures/ClientStructure.ts
@@ -38,6 +38,10 @@ abstract class ClientStructure extends Structure {
     protected static calculateTranslateDelta(lastCoordinates: PointCoordinates, currentCoordinates: PointCoordinates, transformationMatrixToScreenSpace : DOMMatrixInit) {
         const transformationMatrixToMapSpace = DOMMatrix.fromMatrix(transformationMatrixToScreenSpace).invertSelf();
 
+        //Temporary workaround for a bug in Chrome 107++. See Canvas2DContextTrackingWrapper.getInvertedTransform for more info
+        transformationMatrixToMapSpace.m33 = 1;
+        transformationMatrixToMapSpace.m44 = 1;
+
         const lastInMapSpace = new DOMPoint(lastCoordinates.x, lastCoordinates.y).matrixTransform(transformationMatrixToMapSpace);
         const currentInMapSpace = new DOMPoint(currentCoordinates.x, currentCoordinates.y).matrixTransform(transformationMatrixToMapSpace);
 

diff --git a/frontend/src/map/utils/Canvas2DContextTrackingWrapper.ts b/frontend/src/map/utils/Canvas2DContextTrackingWrapper.ts
@@ -18,12 +18,15 @@ export class Canvas2DContextTrackingWrapper {
         this.savedTransforms = [];
     }
 
+    /**
+     * Returns a clone
+     */
     getTransform() {
-        return this.currentTransform.translate(0, 0);
+        return DOMMatrix.fromMatrix(this.currentTransform);
     }
 
     save() {
-        this.savedTransforms.push(this.currentTransform.translate(0, 0));
+        this.savedTransforms.push(this.getTransform());
 
         this.ctx.save();
     }
@@ -76,7 +79,7 @@ export class Canvas2DContextTrackingWrapper {
     mapPointToCurrentTransform(x: number, y: number) {
         const pt = new DOMPoint(x, y);
 
-        return pt.matrixTransform(DOMMatrix.fromMatrix(this.currentTransform).invertSelf());
+        return pt.matrixTransform(this.getInvertedTransform());
     }
 
     getScaleFactor() {
@@ -89,4 +92,21 @@ export class Canvas2DContextTrackingWrapper {
     getContext() {
         return this.ctx;
     }
+
+    /**
+     * 
+     * This is a workaround for a bug introduced in Chrome 107.
+     * For some reason, invertSelf() on a 2d matrix might return values such as m44: 0.9999999999999999 instead of the correct 1
+     * 
+     * This breaks the matrixTransform of 2d points
+     * 
+     */
+    getInvertedTransform() {
+        const matrix = this.getTransform().invertSelf();
+
+        matrix.m33 = 1;
+        matrix.m44 = 1;
+
+        return matrix;
+    }
 }