2017-11-11 20:23:45 +01:00
|
|
|
import React from 'react';
|
2017-11-12 00:11:05 +01:00
|
|
|
import { placeOnGround, createScene, createGcodeGeometry } from './utils.js';
|
2017-11-11 20:23:45 +01:00
|
|
|
import baseSettings from '../settings/default.yml';
|
|
|
|
import printerSettings from '../settings/printer.yml';
|
|
|
|
import materialSettings from '../settings/material.yml';
|
|
|
|
import qualitySettings from '../settings/quality.yml';
|
|
|
|
import PropTypes from 'proptypes';
|
|
|
|
import injectSheet from 'react-jss';
|
2017-11-12 00:46:00 +01:00
|
|
|
import { sliceGeometry } from '../slicer.js';
|
|
|
|
import * as THREE from 'three';
|
2017-11-11 20:23:45 +01:00
|
|
|
|
|
|
|
const styles = {
|
|
|
|
container: {
|
|
|
|
position: 'relative'
|
|
|
|
},
|
|
|
|
canvas: {
|
|
|
|
position: 'absolute',
|
|
|
|
},
|
|
|
|
controlBar: {
|
|
|
|
position: 'absolute',
|
|
|
|
bottom: 0,
|
|
|
|
left: 0
|
|
|
|
},
|
|
|
|
sliceBar: {
|
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
right: 0
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
class Interface extends React.Component {
|
|
|
|
static defaultProps = {
|
|
|
|
width: 720,
|
|
|
|
height: 480,
|
|
|
|
printers: printerSettings,
|
|
|
|
defaultPrinter: 'ultimaker2'
|
|
|
|
};
|
|
|
|
static propTypes = {
|
|
|
|
geometry: (props, propName) => {
|
|
|
|
if (!(props[propName].isGeometry || props[propName].isBufferGeometry)) {
|
|
|
|
throw new Error('invalid prop, is not geometry');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
width: PropTypes.number.isRequired,
|
|
|
|
height: PropTypes.number.isRequired,
|
|
|
|
classes: PropTypes.objectOf(PropTypes.string),
|
|
|
|
printers: PropTypes.object.isRequired,
|
|
|
|
defaultPrinter: PropTypes.string.isRequired,
|
2017-11-12 01:15:38 +01:00
|
|
|
onCompleteActions: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string, callback: PropTypes.func })).isRequired,
|
2017-11-11 20:23:45 +01:00
|
|
|
};
|
|
|
|
state = {
|
2017-11-12 00:46:00 +01:00
|
|
|
controlMode: 'translate',
|
2017-11-12 00:47:06 +01:00
|
|
|
sliced: false
|
2017-11-11 20:23:45 +01:00
|
|
|
};
|
|
|
|
|
2017-11-12 01:41:05 +01:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
printer: props.defaultPrinter
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2017-11-11 20:23:45 +01:00
|
|
|
componentDidMount() {
|
|
|
|
const { canvas } = this.refs;
|
|
|
|
const scene = createScene(canvas, this.props, this.state);
|
|
|
|
this.setState(scene);
|
|
|
|
}
|
|
|
|
|
|
|
|
resetMesh = () => {
|
|
|
|
const { mesh, render } = this.state;
|
|
|
|
if (mesh) {
|
|
|
|
mesh.position.set(0, 0, 0);
|
|
|
|
mesh.scale.set(1, 1, 1);
|
|
|
|
mesh.rotation.set(0, 0, 0);
|
|
|
|
mesh.updateMatrix();
|
|
|
|
placeOnGround(mesh);
|
|
|
|
render();
|
|
|
|
}
|
2017-11-12 01:04:26 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
reset = () => {
|
|
|
|
const { control, mesh, render, gcode, scene } = this.state;
|
|
|
|
control.visible = true;
|
|
|
|
mesh.visible = true;
|
|
|
|
|
|
|
|
scene.remove(gcode.linePreview);
|
|
|
|
gcode.linePreview.geometry.dispose();
|
|
|
|
|
|
|
|
this.setState({ sliced: false, gcode: null });
|
|
|
|
render();
|
|
|
|
};
|
2017-11-11 20:23:45 +01:00
|
|
|
|
2017-11-12 00:11:05 +01:00
|
|
|
slice = async () => {
|
2017-11-12 01:41:05 +01:00
|
|
|
const { mesh, render, scene, control, printer } = this.state;
|
2017-11-12 00:11:05 +01:00
|
|
|
const settings = {
|
|
|
|
...baseSettings,
|
|
|
|
...materialSettings.pla,
|
2017-11-12 01:41:05 +01:00
|
|
|
...printerSettings[printer]
|
2017-11-12 00:11:05 +01:00
|
|
|
};
|
2017-11-12 00:46:00 +01:00
|
|
|
|
|
|
|
const { dimensions } = settings;
|
|
|
|
const centerX = dimensions.x / 2;
|
|
|
|
const centerY = dimensions.y / 2;
|
|
|
|
|
|
|
|
const geometry = mesh.geometry.clone();
|
|
|
|
mesh.updateMatrix();
|
|
|
|
|
2017-11-12 00:57:28 +01:00
|
|
|
const matrix = new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix);
|
2017-11-12 11:53:45 +01:00
|
|
|
const gcode = await sliceGeometry(settings, geometry, matrix, false, true, (process) => {
|
2017-11-12 00:11:05 +01:00
|
|
|
console.log('process: ', process);
|
|
|
|
});
|
|
|
|
|
2017-11-12 01:04:26 +01:00
|
|
|
// TODO
|
2017-11-12 11:53:45 +01:00
|
|
|
// can't disable control ui still interacts with mouse input
|
2017-11-12 01:04:26 +01:00
|
|
|
control.visible = false;
|
|
|
|
mesh.visible = false;
|
2017-11-12 00:11:05 +01:00
|
|
|
|
2017-11-12 01:04:26 +01:00
|
|
|
gcode.linePreview.position.x = -centerY;
|
|
|
|
gcode.linePreview.position.z = -centerX;
|
|
|
|
scene.add(gcode.linePreview);
|
2017-11-12 00:11:05 +01:00
|
|
|
|
2017-11-12 01:04:26 +01:00
|
|
|
this.setState({ sliced: true, gcode });
|
2017-11-12 00:11:05 +01:00
|
|
|
render();
|
|
|
|
};
|
|
|
|
|
2017-11-12 11:28:32 +01:00
|
|
|
updateDrawRange = (event) => {
|
|
|
|
const { gcode, render } = this.state;
|
|
|
|
gcode.linePreview.geometry.setDrawRange(0, event.target.value);
|
|
|
|
render();
|
|
|
|
};
|
|
|
|
|
2017-11-11 20:23:45 +01:00
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.state.editorControls) this.state.editorControls.dispose();
|
|
|
|
if (this.state.control) this.state.control.dispose();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUpdate(nextProps, nextState) {
|
|
|
|
const { control } = this.state;
|
|
|
|
if (control && nextState.controlMode !== this.state.controlMode) control.setMode(nextState.controlMode);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-11-12 01:15:38 +01:00
|
|
|
const { width, height, classes, onCompleteActions } = this.props;
|
|
|
|
const { sliced, gcode } = this.state;
|
|
|
|
|
2017-11-11 20:23:45 +01:00
|
|
|
return (
|
|
|
|
<div style={{ width, height }} className={classes.container}>
|
|
|
|
<canvas className={classes.canvas} ref="canvas" width={width} height={height} />
|
2017-11-12 00:47:06 +01:00
|
|
|
{!sliced && <div className={classes.controlBar}>
|
2017-11-12 00:11:05 +01:00
|
|
|
<button onClick={this.resetMesh}>Reset</button>
|
2017-11-11 20:23:45 +01:00
|
|
|
<button onClick={() => this.setState({ controlMode: 'translate' })}>Translate</button>
|
|
|
|
<button onClick={() => this.setState({ controlMode: 'rotate' })}>Rotate</button>
|
|
|
|
<button onClick={() => this.setState({ controlMode: 'scale' })}>Scale</button>
|
2017-11-12 00:47:06 +01:00
|
|
|
</div>}
|
2017-11-12 11:28:32 +01:00
|
|
|
{sliced && <div className={classes.controlBar}>
|
|
|
|
<input
|
|
|
|
type="range"
|
|
|
|
step="2"
|
|
|
|
min="1"
|
|
|
|
max={gcode.linePreview.geometry.getAttribute('position').count}
|
|
|
|
defaultValue={gcode.linePreview.geometry.getAttribute('position').count}
|
|
|
|
onChange={this.updateDrawRange}
|
|
|
|
/>
|
|
|
|
</div>}
|
2017-11-12 00:47:06 +01:00
|
|
|
{!sliced && <div className={classes.sliceBar}>
|
2017-11-12 00:11:05 +01:00
|
|
|
<button onClick={this.slice}>Slice</button>
|
2017-11-12 00:47:06 +01:00
|
|
|
</div>}
|
2017-11-12 01:04:26 +01:00
|
|
|
{sliced && <div className={classes.sliceBar}>
|
|
|
|
<button onClick={this.reset}>Slice Again</button>
|
2017-11-12 01:15:38 +01:00
|
|
|
{onCompleteActions.map(({ title, callback }, i) => (
|
|
|
|
<button key={i} onClick={() => callback(gcode.gcode)}>{title}</button>
|
|
|
|
))}
|
2017-11-12 01:04:26 +01:00
|
|
|
</div>}
|
2017-11-11 20:23:45 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default injectSheet(styles)(Interface);
|