Update GLText to support padding, rounded corners, and unicode strings (

cruise-automation#687)

* Bump regl-worldview version to 0.18.0

* Fix hot-reloading by fixing addParameters is not a function error

* Update GLText to support padding, rounded corners, and unicode strings

This updates the GLText component in exciting ways:
* Arbitrary padding for text backgrounds
* % based per-line rounded corners
* Unicode character support (great for icon rendering)

Previously we relied on the natural placement of characters during rendering to place characters in the atlas. This required every character to use the full line-height in the atlas, taking up unnecessary space (even for small characters like '.'). In order to support better packing of SDF texture atlases, this PR adds two new per-character properties, `heights` and `yOffsets`.
These properties will allow us to pack characters tighter in the atlas without worrying about overlapping characters at runtime. Since this changes the way worldview consumes existing atlases, we should probably cut a new major version.

- Updates to the latest version of TinySDF
- Adds an SDFGenerator component allowing users to easily create their own precomputed textAtlases

Test plan: Updated and added new screenshot tests

* Fix memoization of atlasConfigs

* Minor

* Remove char mask to see if it improves anti-aliasing

Co-authored-by: Chris Hasson <[email protected]>

docs/src/jsx/allDemos.stories.js

@@ -4,7 +4,7 @@
 //  found in the LICENSE file in the root directory of this source tree.
 //  You may not use this file except in compliance with the License.
 
-import { storiesOf, addParameters } from "@storybook/react";
+import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import CameraStateControlled from "./api/CameraStateControlled";
@@ -82,14 +82,9 @@ Object.keys(allDemos).map((demoName) => {
     );
   };
   const hasScreenshotTest = !demosWithoutScreenshotTests.includes(Component);
-  return stories.add(
-    demoName,
-    hasScreenshotTest
-      ? story
-      : addParameters({
-          screenshot: {
-            skip: true,
-          },
-        })(story)
-  );
+  const fullStory = stories.add(demoName, story);
+  if (!hasScreenshotTest) {
+    fullStory.addParameters({ screenshot: { skip: true } });
+  }
+  return fullStory;
 });

jest/jest.config.js

@@ -34,4 +34,5 @@ module.exports = {
     "react-monaco-editor": "<rootDir>/packages/webviz-core/src/test/stubs/MonacoEditor.js",
     "\\.css$": "<rootDir>/jest/styleMock.js",
   },
+  transformIgnorePatterns: ["node_modules/(?!(@mapbox\\/tiny-sdf)/)"],
 };

packages/regl-worldview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "regl-worldview",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "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",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.3.1",
-    "@mapbox/tiny-sdf": "^1.1.1",
+    "@mapbox/tiny-sdf": "2.0.4",
     "distance-to-line-segment": "0.2.0",
     "draco3d": "^1.4.1",
     "earcut": "^2.1.3",