vmario
/
Doodle3D-Core
mirror of https://github.com/Doodle3D/Doodle3D-Core.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

make doodle preview more dynamic

This commit is contained in:
casperlamboo 2017-11-14 02:30:53 +01:00
parent c1b937914a
commit c543ac8470
3 changed files with 221 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

39
src/components/DoodlePreview.js
View File

@ -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 (
<canvas width={width} height={height} className={className} ref="canvas" />
<div>
<ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
<canvas className={classes.canvas} ref="canvas" />
</div>
);
}
}
@ -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);