Close #1273 display message when WebGL is not available

mistic100 · Mar 26, 2024 · 962331f · 962331f
1 parent 474d48b
commit 962331f
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 32 deletions.
diff --git a/docs/guide/config.md b/docs/guide/config.md
@@ -142,7 +142,8 @@ lang: {
   close: 'Close',
   twoFingers: 'Use two fingers to navigate',
   ctrlZoom: 'Use ctrl + scroll to zoom the image',
-  loadError: 'The panorama can\'t be loaded',
+  loadError: 'The panorama cannot be loaded',
+  webglError: 'Your browser does not seem to support WebGL',
 }
 ```
 

diff --git a/docs/guide/style.md b/docs/guide/style.md
@@ -121,11 +121,11 @@ $psv-loader-width: 100px;
 
 ## Overlay
 
-| variable                 | default                              | description                                      |
-| ------------------------ | ------------------------------------ | ------------------------------------------------ |
-| $psv-overlay-opacity     | .8                                   | Opacity of the overlay                           |
-| $psv-overlay-title-font  | 30px sans-serif                      | Font of the overlay title                        |
-| $psv-overlay-title-color | black                                | Color of the overlay title                       |
-| $psv-overlay-text-font   | 20px sans-serif                      | Font of the overlay text                         |
-| $psv-overlay-text-color  | rgba(0, 0, 0, .8)                    | Color of the overlay text                        |
-| $psv-overlay-image-size  | (portrait: 50vw,<br>landscape: 25vw) | Image/Icon size, depending on screen orientation |
+| variable                 | default                            | description                                      |
+| ------------------------ | ---------------------------------- | ------------------------------------------------ |
+| $psv-overlay-opacity     | .8                                 | Opacity of the overlay                           |
+| $psv-overlay-title-font  | 30px sans-serif                    | Font of the overlay title                        |
+| $psv-overlay-title-color | black                              | Color of the overlay title                       |
+| $psv-overlay-text-font   | 20px sans-serif                    | Font of the overlay text                         |
+| $psv-overlay-text-color  | rgba(0, 0, 0, .8)                  | Color of the overlay text                        |
+| $psv-overlay-image-size  | (portrait: 50%,<br>landscape: 33%) | Image/Icon size, depending on screen orientation |
diff --git a/packages/core/src/Viewer.ts b/packages/core/src/Viewer.ts
@@ -99,14 +99,8 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
     constructor(config: ViewerConfig) {
         super();
 
-        Cache.init();
-        SYSTEM.load();
-
-        this.state = new ViewerState();
-        this.config = getViewerConfig(config);
-
+        // init
         this.parent = getElement(config.container);
-
         if (!this.parent) {
             throw new PSVError(`"container" element not found.`);
         }
@@ -120,6 +114,23 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
 
         checkStylesheet(this.container, 'core');
 
+        this.state = new ViewerState();
+        this.config = getViewerConfig(config);
+
+        this.__setSize(this.config.size);
+
+        this.overlay = new Overlay(this);
+
+        try {
+            SYSTEM.load();
+        } catch (err) {
+            console.error(err);
+            this.showError(this.config.lang.webglError);
+            return;
+        }
+
+        Cache.init();
+
         // @ts-ignore
         this.adapter = new this.config.adapter[0](this, this.config.adapter[1]);
 
@@ -135,10 +146,8 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
         this.navbar = new Navbar(this);
         this.panel = new Panel(this);
         this.notification = new Notification(this);
-        this.overlay = new Overlay(this);
 
-        // init
-        this.resize(this.config.size);
+        this.autoSize();
         this.setCursor(null);
 
         resolveBoolean(SYSTEM.isTouchEnabled, (enabled) => {
@@ -185,12 +194,12 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
         this.children.slice().forEach((child) => child.destroy());
         this.children.length = 0;
 
-        this.eventsHandler.destroy();
-        this.renderer.destroy();
-        this.textureLoader.destroy();
-        this.dataHelper.destroy();
-        this.adapter.destroy();
-        this.dynamics.destroy();
+        this.eventsHandler?.destroy();
+        this.renderer?.destroy();
+        this.textureLoader?.destroy();
+        this.dataHelper?.destroy();
+        this.adapter?.destroy();
+        this.dynamics?.destroy();
 
         this.parent.removeChild(this.container);
         // @ts-ignore
@@ -678,6 +687,11 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
      * Resizes the viewer
      */
     resize(size: CssSize) {
+        this.__setSize(size);
+        this.autoSize();
+    }
+
+    private __setSize(size: CssSize) {
         const s = size as any;
         (['width', 'height'] as Array<'width' | 'height'>).forEach((dim) => {
             if (size && s[dim]) {
@@ -687,8 +701,6 @@ export class Viewer extends TypedEventTarget<ViewerEvents> {
                 this.parent.style[dim] = s[dim];
             }
         });
-
-        this.autoSize();
     }
 
     /**

diff --git a/packages/core/src/data/config.ts b/packages/core/src/data/config.ts
@@ -65,7 +65,8 @@ export const DEFAULTS: Required<ParsedViewerConfig> = {
         close: 'Close',
         twoFingers: 'Use two fingers to navigate',
         ctrlZoom: 'Use ctrl + scroll to zoom the image',
-        loadError: "The panorama can't be loaded",
+        loadError: 'The panorama cannot be loaded',
+        webglError: 'Your browser does not seem to support WebGL',
     },
     keyboard: 'fullscreen',
     keyboardActions: {

diff --git a/packages/core/src/data/system.ts b/packages/core/src/data/system.ts
@@ -83,7 +83,7 @@ export const SYSTEM = {
  */
 function getWebGLCtx(): WebGLRenderingContext | null {
     const canvas = document.createElement('canvas');
-    const names = ['webgl2', 'webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'];
+    const names = ['webgl2', 'webgl', 'experimental-webgl'];
     let context = null;
 
     if (!canvas.getContext) {

diff --git a/packages/core/src/styles/overlay.scss b/packages/core/src/styles/overlay.scss
@@ -11,7 +11,8 @@
     cursor: default;
 
     &-image {
-        margin-bottom: 4vh;
+        width: 100%;
+        text-align: center;
 
         svg {
             width: map.get($psv-overlay-image-size, portrait);
@@ -24,6 +25,7 @@
 
     &-title {
         color: $psv-overlay-title-color;
+        margin-top: 1em;
         font: $psv-overlay-title-font;
         text-align: center;
     }

diff --git a/packages/shared/_vars.scss b/packages/shared/_vars.scss
@@ -100,8 +100,8 @@ $psv-overlay-title-color: black !default;
 $psv-overlay-text-font: 20px sans-serif !default;
 $psv-overlay-text-color: rgba(0, 0, 0, 0.8) !default;
 $psv-overlay-image-size: (
-    portrait: 50vw,
-    landscape: 25vw,
+    portrait: 50%,
+    landscape: 33%,
 ) !default;
 
 // *** Z-INDEXES ***