vmario/Doodle3D-Slicer
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Slicer.git synced 2025-01-09 19:05:15 +01:00
Code Issues Projects Releases Wiki Activity

allow for drag and dropping files

Browse Source
This commit is contained in:
casperlamboo 2018-01-17 17:42:58 +01:00
parent a568a79ede
commit b562d3c2e2
1 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/interface/index.js
View File

@ -100,12 +100,14 @@ class Interface extends React.Component {
pixelRatio: PropTypes.number.isRequired, pixelRatio: PropTypes.number.isRequired,
onCancel: PropTypes.func, onCancel: PropTypes.func,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
muiTheme: PropTypes.object.isRequired muiTheme: PropTypes.object.isRequired,
allowDragDrop: PropTypes.bool.isRequired
}; };
static defaultProps = { static defaultProps = {
pixelRatio: 1, pixelRatio: 1,
name: 'Doodle3D' name: 'Doodle3D',
allowDragDrop: true
}; };
constructor(props) { constructor(props) {
@ -133,16 +135,20 @@ class Interface extends React.Component {
if (mesh) { if (mesh) {
this.updateMesh(mesh, scene); this.updateMesh(mesh, scene);
} else if (fileUrl) { } else if (fileUrl) {
fetch(fileUrl) this.loadFile(fileUrl);
.then(resonse => resonse.json())
.then(json => JSONToSketchData(json))
.then(file => createSceneData(file))
.then(sketch => generateExportMesh(sketch, { offsetSingleWalls: false, matrix: new Matrix4() }))
.then(mesh => this.updateMesh(mesh, scene));
} }
} }
updateMesh(mesh, scene) { loadFile = (fileUrl) => {
fetch(fileUrl)
.then(resonse => resonse.json())
.then(json => JSONToSketchData(json))
.then(file => createSceneData(file))
.then(sketch => generateExportMesh(sketch, { offsetSingleWalls: false, matrix: new Matrix4() }))
.then(mesh => this.updateMesh(mesh));
};
updateMesh(mesh, scene = this.state.scene) {
scene.mesh.geometry = mesh.geometry; scene.mesh.geometry = mesh.geometry;
centerGeometry(scene.mesh); centerGeometry(scene.mesh);
placeOnGround(scene.mesh); placeOnGround(scene.mesh);
@ -287,6 +293,23 @@ class Interface extends React.Component {
this.setState({ objectDimensions: `${Math.round(x)}x${Math.round(y)}x${Math.round(z)}mm` }); this.setState({ objectDimensions: `${Math.round(x)}x${Math.round(y)}x${Math.round(z)}mm` });
}; };
onDrop = (event) => {
event.preventDefault();
if (!this.props.allowDragDrop) return;
for (const file of event.dataTransfer.files) {
const extentions = file.name.split('.').pop();
switch (extentions.toUpperCase()) {
case 'D3SKETCH':
this.loadFile(URL.createObjectURL(file));
break;
default:
break;
}
}
}
render() { render() {
const { classes, onCancel } = this.props; const { classes, onCancel } = this.props;
const { isSlicing, progress, showFullScreen, error, objectDimensions, openUrlDialog } = this.state; const { isSlicing, progress, showFullScreen, error, objectDimensions, openUrlDialog } = this.state;
@ -382,7 +405,15 @@ class Interface extends React.Component {
if (showFullScreen) { if (showFullScreen) {
return ( return (
<div className={classes.container}> <div
className={classes.container}
ref={(container) => {
if (container) {
container.addEventListener('dragover', event => event.preventDefault());
container.addEventListener('drop', this.onDrop);
}
}}
>
<ReactResizeDetector handleWidth handleHeight onResize={this.onResizeContainer} /> <ReactResizeDetector handleWidth handleHeight onResize={this.onResizeContainer} />
<h1 className={classes.title}>Doodle3D Slicer</h1> <h1 className={classes.title}>Doodle3D Slicer</h1>
{d3Panel} {d3Panel}
@ -392,7 +423,15 @@ class Interface extends React.Component {
); );
} else { } else {
return ( return (
<div className={classes.container}> <div
className={classes.container}
ref={(container) => {
if (container) {
container.addEventListener('dragover', event => event.preventDefault());
container.addEventListener('drop', this.onDrop);
}
}}
>
<ReactResizeDetector handleWidth handleHeight onResize={this.onResizeContainer} /> <ReactResizeDetector handleWidth handleHeight onResize={this.onResizeContainer} />
<Tabs <Tabs
style={{ width: '100%', display: 'flex', flexDirection: 'column' }} style={{ width: '100%', display: 'flex', flexDirection: 'column' }}