add font loader

package-lock.json

@@ -4077,8 +4077,7 @@
     "events": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
-      "dev": true
+      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
     },
     "eventsource": {
       "version": "0.1.6",
@@ -4450,6 +4449,17 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
       "dev": true
     },
+    "font-loaded": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/font-loaded/-/font-loaded-1.0.0.tgz",
+      "integrity": "sha512-/qicwhzOAnob/EOguqhk12ccQL50BIkU+j+5mjauQCWKLek4WVag6TmsDGL9bZtgJRlOeLXb5Ul1wSgO/003EA==",
+      "requires": {
+        "events": "1.1.1",
+        "inherits": "2.0.3",
+        "lodash": "4.17.4",
+        "timeout-raf": "1.1.2"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -13191,6 +13201,11 @@
       "integrity": "sha1-84sK6B03R9YoAB9B2vxlKs5nHAo=",
       "dev": true
     },
+    "timeout-raf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/timeout-raf/-/timeout-raf-1.1.2.tgz",
+      "integrity": "sha512-YuDUcAz8kTuZIo5/SIFe2aKsiuNYFraXuRLhXjuqe6ljmVpRaqv5wXhjnXbY1hUdYEQ3Q94cJem/p6HTkBgwrQ=="
+    },
     "timers-browserify": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.4.tgz",

package.json

@@ -29,6 +29,7 @@
     "blueimp-canvas-to-blob": "^3.14.0",
     "bowser": "^1.8.1",
     "fit-curve": "^0.1.6",
+    "font-loaded": "^1.0.0",
     "google-fonts-webpack-plugin": "^0.4.4",
     "imports-loader": "^0.7.1",
     "jss": "^9.4.0",

src/components/App.js

@@ -16,6 +16,7 @@ import JSONToSketchData from '../shape/JSONToSketchData.js';
 import keycode from 'keycode';
 import bowser from 'bowser';
 import * as d2Tools from '../constants/d2Tools.js';
+import { isLoaded, load } from '../utils/loaded.js';
 
 const styles = {
   container: {
@@ -74,9 +75,15 @@ class App extends React.Component {
     selectedPen: PropTypes.string.isRequired
   };
 
+  state = {
+    loaded: isLoaded()
+  };
+
   componentDidMount() {
     const { container } = this.refs;
 
+    if (!this.state.loaded) load.then(() => this.setState({ loaded: true }));
+
     container.addEventListener('dragover', event => event.preventDefault());
     container.addEventListener('drop', this.onDrop);
     window.addEventListener('keydown', this.onKeyDown);
@@ -178,14 +185,16 @@ class App extends React.Component {
 
   render() {
     const { classes, undo, redo } = this.props;
+    const { loaded } = this.state;
+
     return (
       <div ref="container" className={classes.container}>
         <InlineIconsLoader />
-        <div className={classes.appContainer}>
+        {loaded && <div className={classes.appContainer}>
           <D2Panel />
           <div className={classes.vLine} />
           <D3Panel />
-        </div>
+        </div>}
         <Logo />
         <div className={classes.undoMenu}>
           <Button onSelect={undo} className={classes.undo} />

src/components/D2Panel.js

@@ -22,7 +22,6 @@ import { PIXEL_RATIO } from '../constants/general';
 import ShapesManager from '../d2/ShapesManager.js';
 import EventGroup from '../d2/EventGroup.js';
 import ReactResizeDetector from 'react-resize-detector';
-import { load as loadPattern } from '../d2/Shape.js';
 import InputText from './InputText.js';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:d2');
@@ -93,11 +92,6 @@ class D2Panel extends React.Component {
     this.objectContainerInactive.add(new Grid(new CAL.Color(0xdddddd)));
 
     this.shapesManager = new ShapesManager(this.objectContainerActive, this.objectContainerInactive);
-    loadPattern.then(() => {
-      this.activeNeedRender = true;
-      this.inactiveNeedRender = true;
-      this.renderRequest();
-    });
 
     this.DOM = null;
   }

src/components/D3Panel.js

@@ -20,7 +20,6 @@ import RenderChain, { TOONSHADER_OUTLINE, TOONSHADER } from '../d3/RenderChain';
 import BaseTransformer from '../d3/transformers/BaseTransformer.js';
 import Camera from '../d3/Camera.js';
 import ReactResizeDetector from 'react-resize-detector';
-import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:d3');
 
@@ -70,7 +69,6 @@ class D3Panel extends React.Component {
       plane: this.plane
     });
 
-    loadMatcapMaterial.then(this.renderRequest);
     this.DOM = null;
   }
 

src/components/DoodlePreview.js

@@ -8,7 +8,6 @@ import createScene from '../d3/createScene.js';
 import injectSheet from 'react-jss';
 import ReactResizeDetector from 'react-resize-detector';
 import requestAnimationFrame from 'raf';
-import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
 import createRAFOnce from '../utils/rafOnce.js';
 
 const rafOnce = createRAFOnce();
@@ -59,8 +58,6 @@ class DoodlePreview extends React.Component {
 
     this.editorControls = new THREE.EditorControls(scene.camera, canvas);
     this.editorControls.addEventListener('change', () => rafOnce(scene.render));
-
-    loadMatcapMaterial.then(scene.render);
   }
 
   componentWillUnmount() {

src/utils/loaded.js

@@ -0,0 +1,17 @@
+import { FONT_FACE } from '../constants/general.js';
+import FontLoaded from 'font-loaded';
+import { load as loadPattern } from '../d2/Shape.js';
+import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
+
+const loadFont = font => {
+  const fontLoaded = new FontLoaded(font);
+  return new Promise((resolve, reject) => {
+    fontLoaded.on('load', resolve);
+    fontLoaded.on('error', reject);
+  });
+};
+export const loadFonts = Promise.all(Object.values(FONT_FACE).map(loadFont));
+
+let loaded = false;
+export const load = Promise.all([loadFonts, loadPattern, loadMatcapMaterial]).then(() => loaded = true);
+export const isLoaded = () => loaded;