vmario/Doodle3D-Slicer
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Slicer.git synced 2024-12-23 11:33:49 +01:00
Code Issues Projects Releases Wiki Activity

Add dimensions details to 3d panel

Browse Source
This commit is contained in:
casperlamboo 2018-01-17 08:40:48 +01:00
parent e1d833d4f3
commit 9764e0a374
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/interface/index.js
View File

@ -3,6 +3,7 @@ import React from 'react';
import { Quaternion } from 'three/src/math/Quaternion.js'; import { Quaternion } from 'three/src/math/Quaternion.js';
import { Vector3 } from 'three/src/math/Vector3.js'; import { Vector3 } from 'three/src/math/Vector3.js';
import { Mesh } from 'three/src/objects/Mesh.js'; import { Mesh } from 'three/src/objects/Mesh.js';
import { Box3 } from 'three/src/math/Box3.js';
import PropTypes from 'proptypes'; import PropTypes from 'proptypes';
import { centerGeometry, placeOnGround, createScene, fetchProgress, slice, TabTemplate } from './utils.js'; import { centerGeometry, placeOnGround, createScene, fetchProgress, slice, TabTemplate } from './utils.js';
import injectSheet from 'react-jss'; import injectSheet from 'react-jss';
@ -77,6 +78,9 @@ const styles = {
}, },
title: { title: {
position: 'absolute' position: 'absolute'
},
detail: {
marginBottom: '10px'
} }
}; };
@ -108,6 +112,7 @@ class Interface extends React.Component {
isSlicing: false, isSlicing: false,
isLoading: true, isLoading: true,
error: null, error: null,
objectDimensions: '0x0x0mm',
popover: { popover: {
element: null, element: null,
open: false open: false
@ -141,6 +146,7 @@ class Interface extends React.Component {
scene.mesh.geometry = mesh.geometry; scene.mesh.geometry = mesh.geometry;
centerGeometry(scene.mesh); centerGeometry(scene.mesh);
placeOnGround(scene.mesh); placeOnGround(scene.mesh);
this.calculateDimensions();
scene.render(); scene.render();
this.setState({ mesh, isLoading: false }); this.setState({ mesh, isLoading: false });
@ -162,6 +168,7 @@ class Interface extends React.Component {
mesh.rotation.set(0, 0, 0); mesh.rotation.set(0, 0, 0);
mesh.updateMatrix(); mesh.updateMatrix();
placeOnGround(mesh); placeOnGround(mesh);
this.calculateDimensions();
render(); render();
} }
}; };
@ -175,6 +182,7 @@ class Interface extends React.Component {
mesh.scale.multiplyScalar(factor); mesh.scale.multiplyScalar(factor);
mesh.updateMatrix(); mesh.updateMatrix();
placeOnGround(mesh); placeOnGround(mesh);
this.calculateDimensions();
render(); render();
} }
}; };
@ -188,6 +196,7 @@ class Interface extends React.Component {
if (mesh) { if (mesh) {
mesh.rotateOnWorldAxis(axis, angle); mesh.rotateOnWorldAxis(axis, angle);
placeOnGround(mesh); placeOnGround(mesh);
this.calculateDimensions();
render(); render();
} }
}; };
@ -266,9 +275,15 @@ class Interface extends React.Component {
this.setState({ settings, error: null }); this.setState({ settings, error: null });
}; };
calculateDimensions = () => {
const { scene: { mesh } } = this.state;
const { x, y, z } = new Box3().setFromObject(mesh).getSize();
this.setState({ objectDimensions: `${Math.round(x)}x${Math.round(y)}x${Math.round(z)}mm` });
};
render() { render() {
const { classes, onCancel } = this.props; const { classes, onCancel } = this.props;
const { isSlicing, isLoading, progress, showFullScreen, error } = this.state; const { isSlicing, isLoading, progress, showFullScreen, error, objectDimensions } = this.state;
const disableUI = isSlicing || isLoading; const disableUI = isSlicing || isLoading;
const style = { ...(showFullScreen ? {} : { maxWidth: 'inherit', width: '100%', height: '100%' }) }; const style = { ...(showFullScreen ? {} : { maxWidth: 'inherit', width: '100%', height: '100%' }) };
@ -319,6 +334,9 @@ class Interface extends React.Component {
<ReactResizeDetector handleWidth handleHeight onResize={this.onResize3dView} /> <ReactResizeDetector handleWidth handleHeight onResize={this.onResize3dView} />
<canvas className={classes.canvas} ref="canvas" /> <canvas className={classes.canvas} ref="canvas" />
<div className={classes.controlBar}> <div className={classes.controlBar}>
<div className={classes.detail}>
<p>Dimensions: {objectDimensions}</p>
</div>
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.resetMesh} label="reset" /> <RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.resetMesh} label="reset" />
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.scaleUp} label="scale down" /> <RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.scaleUp} label="scale down" />
<RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.scaleDown} label="scale up" /> <RaisedButton disabled={disableUI} className={classes.controlButton} onTouchTap={this.scaleDown} label="scale up" />