Fix #1303 improve system detection

mistic100 · May 14, 2024 · 024cbca · 024cbca
1 parent d90c4db
commit 024cbca
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/packages/compass-plugin/src/components/CompassComponent.ts b/packages/compass-plugin/src/components/CompassComponent.ts
@@ -89,6 +89,13 @@ export class CompassComponent extends AbstractComponent {
         }
     }
 
+    override destroy(): void {
+        this.canvas.width = 0;
+        this.canvas.height = 0;
+
+        super.destroy();
+    }
+
     applyConfig() {
         this.container.className = `psv-compass psv-compass--${this.config.position.join('-')}`;
 

diff --git a/packages/core/src/data/system.ts b/packages/core/src/data/system.ts
@@ -153,28 +153,41 @@ function isTouchEnabled(): ResolvableBoolean {
  * We only test powers of 2 and height = width / 2 because that's what we need to generate WebGL textures
  */
 function getMaxCanvasWidth(maxWidth: number): number {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = maxWidth;
-    canvas.height = maxWidth / 2;
+    let width = maxWidth;
+    let pass = false;
+
+    while (width > 1024 && !pass) {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = width;
+        canvas.height = width / 2;
 
-    while (canvas.width > 1024) {
         ctx.fillStyle = 'white';
         ctx.fillRect(0, 0, 1, 1);
 
         try {
             if (ctx.getImageData(0, 0, 1, 1).data[0] > 0) {
-                return canvas.width;
+                pass = true;
             }
         } catch (e) {
             // continue
         }
 
-        canvas.width /= 2;
-        canvas.height /= 2;
+        // Release canvas elements (Safari memory usage fix)
+        // https://stackoverflow.com/questions/52532614/total-canvas-memory-use-exceeds-the-maximum-limit-safari-12
+        canvas.width = 0;
+        canvas.height = 0;
+
+        if (!pass) {
+            width /= 2;
+        }
     }
 
-    throw new PSVError('Unable to detect system capabilities');
+    if (pass) {
+        return width;
+    } else {
+        throw new PSVError('Unable to detect system capabilities');
+    }
 }
 
 /**

diff --git a/packages/map-plugin/src/components/MapComponent.ts b/packages/map-plugin/src/components/MapComponent.ts
@@ -142,6 +142,9 @@ export class MapComponent extends AbstractComponent {
     }
 
     override destroy(): void {
+        this.canvas.width = 0;
+        this.canvas.height = 0;
+
         window.removeEventListener('touchmove', this);
         window.removeEventListener('mousemove', this);
         window.removeEventListener('touchend', this);