diff --git a/package-lock.json b/package-lock.json
index 20f7f87..e55ded0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1289,6 +1289,11 @@
"repeat-element": "1.1.2"
}
},
+ "brcast": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
+ "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg=="
+ },
"browserslist": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.5.1.tgz",
@@ -1415,6 +1420,14 @@
"boom": "2.10.1"
}
},
+ "css-vendor": {
+ "version": "0.3.8",
+ "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+ "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+ "requires": {
+ "is-in-browser": "1.1.3"
+ }
+ },
"d": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/d/-/d-0.1.1.tgz",
@@ -3265,6 +3278,11 @@
"is-nan-x": "1.0.1"
}
},
+ "is-function": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
+ "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
+ },
"is-function-x": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/is-function-x/-/is-function-x-3.3.0.tgz",
@@ -3289,6 +3307,11 @@
"is-extglob": "1.0.0"
}
},
+ "is-in-browser": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+ "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+ },
"is-index-x": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-index-x/-/is-index-x-1.1.0.tgz",
@@ -3334,6 +3357,36 @@
"is-primitive": "2.0.0"
}
},
+ "is-observable": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-0.2.0.tgz",
+ "integrity": "sha1-s2ExHYPG5dcmyr9eJQsCNxBvWuI=",
+ "requires": {
+ "symbol-observable": "0.2.4"
+ },
+ "dependencies": {
+ "symbol-observable": {
+ "version": "0.2.4",
+ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-0.2.4.tgz",
+ "integrity": "sha1-lag9smGG1q9+ehjb2XYKL4bQj0A="
+ }
+ }
+ },
+ "is-plain-object": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+ "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+ "requires": {
+ "isobject": "3.0.1"
+ },
+ "dependencies": {
+ "isobject": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+ "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+ }
+ }
+ },
"is-posix-bracket": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
@@ -3479,6 +3532,105 @@
}
}
},
+ "jss": {
+ "version": "9.3.1",
+ "resolved": "https://registry.npmjs.org/jss/-/jss-9.3.1.tgz",
+ "integrity": "sha512-YBW2fS3IQxJoDVVVOTornlMwKg0x09LjkqSeySPmnKstYOIH1liXy74MFxEM2B7e0KN8CitYsSV0l/oMaSD1Zg==",
+ "requires": {
+ "is-in-browser": "1.1.3",
+ "symbol-observable": "1.0.4",
+ "warning": "3.0.0"
+ }
+ },
+ "jss-camel-case": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.0.0.tgz",
+ "integrity": "sha512-XAYa7JpGkLdlLgEfuzSQSVONRzSVvv4Tvyv5H8hLmJuHeFHTWwVrJrW1Cg/buED3izXKwTU2KBGpeXjIR5Eaew=="
+ },
+ "jss-compose": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
+ "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
+ "requires": {
+ "warning": "3.0.0"
+ }
+ },
+ "jss-default-unit": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.0.tgz",
+ "integrity": "sha512-tzYgFePQL0neV3Z/oZlbv7XT9Oj2wd3DMjtRYtLGeExSz/SMyVyMhnVtuX01dWUAvA94RhkddvotpdpNDj2Y8g==",
+ "requires": {
+ "is-observable": "0.2.0"
+ }
+ },
+ "jss-expand": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.0.0.tgz",
+ "integrity": "sha512-ndsp+OnIeIc5XIHRFZlLeKNZZW25xqgohhMAyBSUZNZDuUAI9pdod3psHGRaQzyNrU3aMupyBvHnIglBHHgNTg==",
+ "requires": {
+ "is-observable": "0.2.0"
+ }
+ },
+ "jss-extend": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.0.1.tgz",
+ "integrity": "sha512-PgJRg6zkILmgiA4Ye6P33rTjHAVDx+/dN3syT2JE6EhylfmOYs/2d+MsMxXH+Fkh9wjlvNUiinlu7Mljl+TuXA==",
+ "requires": {
+ "is-observable": "0.2.0",
+ "warning": "3.0.0"
+ }
+ },
+ "jss-global": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+ "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
+ },
+ "jss-nested": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+ "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+ "requires": {
+ "warning": "3.0.0"
+ }
+ },
+ "jss-preset-default": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.0.1.tgz",
+ "integrity": "sha512-ZBj1ifZAPDn8iiC9PuB1jDCm/I0Bn53UNL9NHBgOY6AyMorDPgEb3IRjt6H+OHKwnEuCHw8tC/e3/q4I4DgTIw==",
+ "requires": {
+ "jss-camel-case": "6.0.0",
+ "jss-compose": "5.0.0",
+ "jss-default-unit": "8.0.0",
+ "jss-expand": "5.0.0",
+ "jss-extend": "6.0.1",
+ "jss-global": "3.0.0",
+ "jss-nested": "6.0.1",
+ "jss-props-sort": "6.0.0",
+ "jss-template": "1.0.0",
+ "jss-vendor-prefixer": "7.0.0"
+ }
+ },
+ "jss-props-sort": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+ "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
+ },
+ "jss-template": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.0.tgz",
+ "integrity": "sha512-NFAgcAp8V2fUxffWGGQ5zAolJq3neAvNjmWIwSmy9M6bmXTK9rnTu0fBlAcUh0ALC94B596/2TRphdkE5WRECQ==",
+ "requires": {
+ "warning": "3.0.0"
+ }
+ },
+ "jss-vendor-prefixer": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+ "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+ "requires": {
+ "css-vendor": "0.3.8"
+ }
+ },
"jszip": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.4.tgz",
@@ -4320,6 +4472,18 @@
"prop-types": "15.6.0"
}
},
+ "react-jss": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.0.0.tgz",
+ "integrity": "sha512-vVzOLePx1gjdR/V4nZr0tsCLKCKfKfPdJAnQVDU9BSVh+vlva36/gZNdb1p5BrnX4gvZ9cqLHF0urzkaTX1xzg==",
+ "requires": {
+ "hoist-non-react-statics": "2.3.1",
+ "jss": "9.3.1",
+ "jss-preset-default": "4.0.1",
+ "prop-types": "15.6.0",
+ "theming": "1.2.1"
+ }
+ },
"react-redux": {
"version": "5.0.6",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.6.tgz",
@@ -4333,6 +4497,14 @@
"prop-types": "15.6.0"
}
},
+ "react-resize-detector": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-1.1.0.tgz",
+ "integrity": "sha512-68KVcQlhcWQGXMAie82YueCa4f4yqwEoiQbVyYlSgJEin1zMtNBLLeU/+6FLNf1TTgjwSfpbMTJTw/uU0HNgtQ==",
+ "requires": {
+ "prop-types": "15.6.0"
+ }
+ },
"readable-stream": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
@@ -4661,6 +4833,11 @@
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
},
+ "symbol-observable": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz",
+ "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0="
+ },
"tar": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
@@ -4693,6 +4870,17 @@
"xtend": "4.0.1"
}
},
+ "theming": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/theming/-/theming-1.2.1.tgz",
+ "integrity": "sha512-cGFWBqPP93I/pVucq6OAYQFoYyvueEOUmK5dxdlFsgx/fzn8In0sbeLEgxvEHk1ktvHGeX4uZFP8QJmXyIzw/A==",
+ "requires": {
+ "brcast": "3.0.1",
+ "is-function": "1.0.1",
+ "is-plain-object": "2.0.4",
+ "prop-types": "15.6.0"
+ }
+ },
"three": {
"version": "0.83.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.83.0.tgz",
@@ -4953,6 +5141,14 @@
"resolved": "https://registry.npmjs.org/vuvuzela/-/vuvuzela-1.0.3.tgz",
"integrity": "sha1-O+FF5YJxxzylUnndhR8SpoIRSws="
},
+ "warning": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+ "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+ "requires": {
+ "loose-envify": "1.3.1"
+ }
+ },
"whatwg-fetch": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz",
diff --git a/package.json b/package.json
index a4a37ad..4107a3e 100755
--- a/package.json
+++ b/package.json
@@ -29,7 +29,9 @@
"proptypes": "^1.1.0",
"raw-loader": "^0.5.1",
"react": "^16.0.0",
+ "react-jss": "^8.0.0",
"react-redux": "^5.0.6",
+ "react-resize-detector": "^1.1.0",
"redux-form": "^7.1.2",
"regenerator-runtime": "^0.11.0",
"semver": "^5.4.1",
diff --git a/src/components/DoodlePreview.js b/src/components/DoodlePreview.js
index b851da7..fbdbe80 100644
--- a/src/components/DoodlePreview.js
+++ b/src/components/DoodlePreview.js
@@ -5,6 +5,12 @@ import PropTypes from 'proptypes';
import JSONToSketchData from '../shape/JSONToSketchData.js';
import createSceneData from '../d3/createSceneData.js';
import createScene from '../d3/createScene.js';
+import injectSheet from 'react-jss';
+import ReactResizeDetector from 'react-resize-detector';
+
+const styles = {
+ position: 'absolute'
+};
class DoodlePreview extends React.Component {
constructor() {
@@ -20,15 +26,12 @@ class DoodlePreview extends React.Component {
if (docData) sketchData = await JSONToSketchData(this.props.docData);
const { canvas } = this.refs;
- const { width, height, pixelRatio } = this.props
+ const { pixelRatio } = this.props
const sceneData = createSceneData(sketchData);
const scene = createScene(sceneData, canvas);
- this.setState({ scene });
-
- scene.setSize(width, height, pixelRatio);
- scene.render();
+ this.setState(scene);
this.editorControls = new THREE.EditorControls(scene.camera, canvas);
this.editorControls.addEventListener('change', () => scene.render());
@@ -38,19 +41,22 @@ class DoodlePreview extends React.Component {
if (this.editorControls) this.editorControls.dispose();
}
- componentDidUpdate(prevProps) {
- const { scene } = this.state;
- const { width, height } = this.props;
- if (scene !== null && (prevProps.width !== width || prevProps.height !== height)) {
- scene.setSize(width, height);
- scene.render();
- }
- }
+ onResize = (width, height) => {
+ window.requestAnimationFrame(() => {
+ const { setSize } = this.state;
+ const { pixelRatio } = this.props;
+ setSize(width, height, pixelRatio);
+ });
+ };
render() {
- const { width, height, className } = this.props;
+ const { classes } = this.props;
+
return (
-
+
+
+
+
);
}
}
@@ -60,6 +66,7 @@ DoodlePreview.defaultProps = {
pixelRatio: 1
};
DoodlePreview.propTypes = {
+ classes: PropTypes.objectOf(PropTypes.string),
className: PropTypes.string,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
@@ -71,4 +78,4 @@ DoodlePreview.propTypes = {
})
};
-export default DoodlePreview;
+export default injectSheet(styles)(DoodlePreview);