vmario/Doodle3D-Slicer
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Slicer.git synced 2024-11-19 20:37:56 +01:00
Code Issues Projects Releases Wiki Activity

don't require a model for the slicer interface

Browse Source
This commit is contained in:
casperlamboo 2018-01-17 17:18:28 +01:00
parent 742783e4db
commit a568a79ede
2 changed files with 30 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.js
View File

@ -36,6 +36,6 @@ const { file } = queryString.parse(location.search);
render(( render((
<MuiThemeProvider muiTheme={muiTheme}> <MuiThemeProvider muiTheme={muiTheme}>
<Interface file={file} name="doodle"/> <Interface fileUrl={file} name="doodle"/>
</MuiThemeProvider> </MuiThemeProvider>
), document.getElementById('app')); ), document.getElementById('app'));

64
src/interface/index.js
View File

@ -94,10 +94,8 @@ const styles = {
class Interface extends React.Component { class Interface extends React.Component {
static propTypes = { static propTypes = {
file: PropTypes.oneOfType([ fileUrl: PropTypes.string,
PropTypes.shape({ isMesh: PropTypes.oneOf([true]) }), mesh: PropTypes.shape({ isMesh: PropTypes.oneOf([true]) }),
PropTypes.string
]).isRequired,
classes: PropTypes.objectOf(PropTypes.string), classes: PropTypes.objectOf(PropTypes.string),
pixelRatio: PropTypes.number.isRequired, pixelRatio: PropTypes.number.isRequired,
onCancel: PropTypes.func, onCancel: PropTypes.func,
@ -119,10 +117,9 @@ class Interface extends React.Component {
settings: null, settings: null,
showFullScreen: false, showFullScreen: false,
isSlicing: false, isSlicing: false,
isLoading: true,
error: null, error: null,
objectDimensions: '0x0x0mm', objectDimensions: '0x0x0mm',
popover: { element: null, open: false }, popover: { open: false, element: null },
openUrlDialog: { open: false, url: '' } openUrlDialog: { open: false, url: '' }
}; };
} }
@ -132,20 +129,16 @@ class Interface extends React.Component {
const { scene } = this.state; const { scene } = this.state;
scene.updateCanvas(canvas); scene.updateCanvas(canvas);
const { file } = this.props; const { mesh, fileUrl } = this.props;
if (!file) { if (mesh) {
throw new Error('no file provided'); this.updateMesh(mesh, scene);
} if (typeof file === 'string') { } else if (fileUrl) {
fetch(file) fetch(fileUrl)
.then(resonse => resonse.json()) .then(resonse => resonse.json())
.then(json => JSONToSketchData(json)) .then(json => JSONToSketchData(json))
.then(file => createSceneData(file)) .then(file => createSceneData(file))
.then(sketch => generateExportMesh(sketch, { offsetSingleWalls: false, matrix: new Matrix4() })) .then(sketch => generateExportMesh(sketch, { offsetSingleWalls: false, matrix: new Matrix4() }))
.then(mesh => this.updateMesh(mesh, scene)); .then(mesh => this.updateMesh(mesh, scene));
} else if (file.isMesh) {
this.updateMesh(file, scene);
} else {
throw new Error('unknown file property');
} }
} }
@ -155,8 +148,6 @@ class Interface extends React.Component {
placeOnGround(scene.mesh); placeOnGround(scene.mesh);
this.calculateDimensions(); this.calculateDimensions();
scene.render(); scene.render();
this.setState({ mesh, isLoading: false });
} }
componentWillUnmount() { componentWillUnmount() {
@ -167,8 +158,8 @@ class Interface extends React.Component {
} }
resetMesh = () => { resetMesh = () => {
const { scene: { mesh, render }, isSlicing, isLoading } = this.state; const { scene: { mesh, render }, isSlicing } = this.state;
if (isSlicing || isLoading) return; if (isSlicing) return;
if (mesh) { if (mesh) {
mesh.position.set(0, 0, 0); mesh.position.set(0, 0, 0);
mesh.scale.set(1, 1, 1); mesh.scale.set(1, 1, 1);
@ -183,8 +174,8 @@ class Interface extends React.Component {
scaleUp = () => this.scaleMesh(0.9); scaleUp = () => this.scaleMesh(0.9);
scaleDown = () => this.scaleMesh(1.0 / 0.9); scaleDown = () => this.scaleMesh(1.0 / 0.9);
scaleMesh = (factor) => { scaleMesh = (factor) => {
const { scene: { mesh, render }, isSlicing, isLoading } = this.state; const { scene: { mesh, render }, isSlicing } = this.state;
if (isSlicing || isLoading) return; if (isSlicing) return;
if (mesh) { if (mesh) {
mesh.scale.multiplyScalar(factor); mesh.scale.multiplyScalar(factor);
mesh.updateMatrix(); mesh.updateMatrix();
@ -198,8 +189,8 @@ class Interface extends React.Component {
rotateY = () => this.rotate(new Vector3(1, 0, 0), Math.PI / 2.0); rotateY = () => this.rotate(new Vector3(1, 0, 0), Math.PI / 2.0);
rotateZ = () => this.rotate(new Vector3(0, 1, 0), Math.PI / 2.0); rotateZ = () => this.rotate(new Vector3(0, 1, 0), Math.PI / 2.0);
rotate = (axis, angle) => { rotate = (axis, angle) => {
const { scene: { mesh, render }, isSlicing, isLoading } = this.state; const { scene: { mesh, render }, isSlicing } = this.state;
if (isSlicing || isLoading) return; if (isSlicing) return;
if (mesh) { if (mesh) {
mesh.rotateOnWorldAxis(axis, angle); mesh.rotateOnWorldAxis(axis, angle);
placeOnGround(mesh); placeOnGround(mesh);
@ -209,10 +200,14 @@ class Interface extends React.Component {
}; };
slice = async (target) => { slice = async (target) => {
const { isSlicing, isLoading, settings, mesh, scene: { material, mesh: { matrix } } } = this.state; const { isSlicing, settings, mesh, scene: { material, mesh: { matrix } } } = this.state;
const { name } = this.props; const { name } = this.props;
if (isSlicing || isLoading) return; if (isSlicing) return;
if (!mesh) {
this.setState({ error: 'there is no file to slice' });
return;
}
this.closePopover(); this.closePopover();
this.setState({ isSlicing: true, progress: { action: '', percentage: 0, step: 0 }, error: null }); this.setState({ isSlicing: true, progress: { action: '', percentage: 0, step: 0 }, error: null });
@ -294,15 +289,14 @@ class Interface extends React.Component {
render() { render() {
const { classes, onCancel } = this.props; const { classes, onCancel } = this.props;
const { isSlicing, isLoading, progress, showFullScreen, error, objectDimensions, openUrlDialog } = this.state; const { isSlicing, progress, showFullScreen, error, objectDimensions, openUrlDialog } = this.state;
const disableUI = isSlicing || isLoading;
const style = { ...(showFullScreen ? {} : { maxWidth: 'inherit', width: '100%', height: '100%' }) }; const style = { ...(showFullScreen ? {} : { maxWidth: 'inherit', width: '100%', height: '100%' }) };
const settingsPanel = ( const settingsPanel = (
<div className={classes.settingsBar} style={style}> <div className={classes.settingsBar} style={style}>
<Settings <Settings
disabled={disableUI} disabled={isSlicing}
onChange={this.onChangeSettings} onChange={this.onChangeSettings}
/> />
<div className={classes.sliceActions}> <div className={classes.sliceActions}>
@ -323,7 +317,7 @@ class Interface extends React.Component {
primary primary
className={`${classes.button}`} className={`${classes.button}`}
onTouchTap={this.openPopover} onTouchTap={this.openPopover}
disabled={disableUI} disabled={isSlicing}
/> />
<Popover <Popover
open={this.state.popover.open} open={this.state.popover.open}
@ -350,12 +344,12 @@ class Interface extends React.Component {
<div className={classes.detail}> <div className={classes.detail}>
<p>Dimensions: {objectDimensions}</p> <p>Dimensions: {objectDimensions}</p>
</div> </div>
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.resetMesh} label="reset" /> <RaisedButton disabled={isSlicing} className={classes.controlButton} onTouchTap={this.resetMesh} label="reset" />
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.scaleUp} label="scale down" /> <RaisedButton disabled={isSlicing} className={classes.controlButton} onTouchTap={this.scaleUp} label="scale down" />
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.scaleDown} label="scale up" /> <RaisedButton disabled={isSlicing} className={classes.controlButton} onTouchTap={this.scaleDown} label="scale up" />
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.rotateX} label="rotate x" /> <RaisedButton disabled={isSlicing} className={classes.controlButton} onTouchTap={this.rotateX} label="rotate x" />
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.rotateY} label="rotate y" /> <RaisedButton disabled={isSlicing} className={classes.controlButton} onTouchTap={this.rotateY} label="rotate y" />
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.rotateZ} label="rotate z" /> <RaisedButton disabled={isSlicing} className={classes.controlButton} onTouchTap={this.rotateZ} label="rotate z" />
</div> </div>
</div> </div>
); );