Make GLText work in workers (cruise-automation#622)

This is half-reasonable, half-hack:
* Preferring `OffscreenCanvas`, and detecting it at runtime is
  reasonable.
* Hacking `document` for TinySDF is a bit crazy. I've raised an issue
  upstream, hopefully this won't live long.

Test plan: Linked against a local webviz and opened a bag containing a
strange character with the worker flag on.

Author: MatthewSteel

packages/regl-worldview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "regl-worldview",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "description": "A reusable component for rendering 2D and 3D views using regl",
   "license": "Apache-2.0",
   "repository": "cruise-automation/webviz/tree/master/packages/regl-worldview",

packages/regl-worldview/src/commands/GLText.js

@@ -11,6 +11,13 @@ import { createInstancedGetChildrenForHitmap } from "../utils/getChildrenForHitm
 import Command, { type CommonCommandProps } from "./Command";
 import { isColorDark, type TextMarker } from "./Text";
 
+// HACK: TinySDF doesn't agree with workers. Until support is added, hack this to make it work.
+// TODO(steel): Upstream the fix in memoizedCreateCanvas.
+if (!self.document) {
+  // $FlowFixMe: Flow doesn't know about OffscreenCanvas.
+  self.document = { createElement: () => new OffscreenCanvas(0, 0) };
+}
+
 // The GLText command renders text from a Signed Distance Field texture.
 // There are many external resources about SDFs and text rendering in WebGL, including:
 // https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
@@ -80,7 +87,8 @@ const BG_COLOR_LIGHT = Object.freeze({ r: 1, g: 1, b: 1, a: 1 });
 const BG_COLOR_DARK = Object.freeze({ r: 0, g: 0, b: 0, a: 1 });
 
 const memoizedCreateCanvas = memoizeOne((font) => {
-  const canvas = document.createElement("canvas");
+  // $FlowFixMe: Flow doesn't know about OffscreenCanvas.
+  const canvas: HTMLCanvasElement = self.OffscreenCanvas ? new OffscreenCanvas(0, 0) : document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   ctx.font = font;
   return ctx;