WASM-Cone: Refactor Module object

- resize window in `onRuntimeInitialized` handler - place keys in single-quotes so that closure compiler works - this example doesn't expose bindings so no need to call exported function to create an instance.

WASM-Cone: Refactor Module object
3d99f5c6 · Jaswant Panchumarti (Kitware) · 5f7ed20c · 3d99f5c6
Commit 3d99f5c6 authored 1 year ago by Jaswant Panchumarti (Kitware)
--- a/Examples/Emscripten/Cxx/Cone/index.html
+++ b/Examples/Emscripten/Cxx/Cone/index.html
 <!doctype html>
 <html>
-  <head>
-    <meta charset="utf-8"/>
-  </head>
-  <body>
-    <canvas id="canvas" style="position: absolute; left: 0; top: 0;"></canvas>
-    <script type="text/javascript" src="Cone.js"></script>
-    <script type='text/javascript'>
-      var Module = {
-        canvas: (function() {
-          var canvas = document.getElementById('canvas');
-          canvas.addEventListener(
-            "webglcontextlost",
-            function(e) {
-              console.error('WebGL context lost. You will need to reload the page.');
-              e.preventDefault();
-            },
-            false
-          );
-          return canvas;
-        })(),
-        onRuntimeInitialized:  function() {
-          console.log('initialized');
-        },
-      };

-      // Use the export name to instantiate the app
-      var app = vtkApp(Module);
-      console.log('App created');
-    </script>
-  </body>
+<head>
+  <meta charset="utf-8" />
+</head>
+
+<body>
+  <canvas id="canvas" style="position: absolute; left: 0; top: 0;"></canvas>
+  <script type="text/javascript" src="Cone.js"></script>
+  <script type='text/javascript'>
+    var Module = {
+      'canvas': (function () {
+        var canvas = document.getElementById('canvas');
+        canvas.addEventListener(
+          "webglcontextlost",
+          function (e) {
+            console.error('WebGL context lost. You will need to reload the page.');
+            e.preventDefault();
+          },
+          false
+        );
+        return canvas;
+      })(),
+      'print': (function () {
+        return function (text) {
+          text = Array.prototype.slice.call(arguments).join(' ');
+          console.info(text);
+        };
+      })(),
+      'printErr': function (text) {
+        text = Array.prototype.slice.call(arguments).join(' ');
+        console.error(text);
+      },
+      'onRuntimeInitialized': function () {
+        console.log('WASM runtime initialized');
+        // sends a resize event so that the render window fills up browser tab dimensions.
+        setTimeout(() => {
+          window.dispatchEvent(new Event('resize'));
+        }, 0);
+        // focus on the canvas to grab keyboard inputs.
+        canvas.setAttribute('tabindex', '0');
+        // grab focus when the render window region receives mouse clicks.
+        canvas.addEventListener('click', () => canvas.focus());
+      }
+    };
+  </script>
+</body>
+
 </html>