diff --git a/package-lock.json b/package-lock.json
index 3db3187..45f55d5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f0375db..acefa47 100755
--- a/package.json
+++ b/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",
diff --git a/src/components/App.js b/src/components/App.js
index 357fa63..88fdb97 100644
--- a/src/components/App.js
+++ b/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 (
-
}
diff --git a/src/components/D2Panel.js b/src/components/D2Panel.js
index cd9438d..ebfcd17 100644
--- a/src/components/D2Panel.js
+++ b/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;
}
diff --git a/src/components/D3Panel.js b/src/components/D3Panel.js
index 2a043dd..09fee90 100644
--- a/src/components/D3Panel.js
+++ b/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;
}
diff --git a/src/components/DoodlePreview.js b/src/components/DoodlePreview.js
index d18b504..831e23c 100644
--- a/src/components/DoodlePreview.js
+++ b/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() {
diff --git a/src/utils/loaded.js b/src/utils/loaded.js
new file mode 100644
index 0000000..59e04de
--- /dev/null
+++ b/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;