From dcd3dc16140c0ad358540cb78a8feb45879ed939 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Mon, 13 Nov 2017 02:47:53 +0100 Subject: [PATCH] settings now work --- src/interface/Settings.js | 66 ++++++++++++++++----------------------- src/interface/index.js | 49 ++++++++++++++++++++++++----- src/interface/utils.js | 7 ++--- 3 files changed, 72 insertions(+), 50 deletions(-) diff --git a/src/interface/Settings.js b/src/interface/Settings.js index 9758df6..a22a9ff 100644 --- a/src/interface/Settings.js +++ b/src/interface/Settings.js @@ -1,10 +1,6 @@ import React from 'react'; import PropTypes from 'proptypes'; import _ from 'lodash'; -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 { Tabs, Tab } from 'material-ui/Tabs'; import MenuItem from 'material-ui/MenuItem'; import injectSheet from 'react-jss'; @@ -21,52 +17,37 @@ const styles = { } }; -const DEFAULT_PRINTER = 'ultimaker2'; -const DEFAULT_MATERIAL = 'pla'; -const DEFAULT_QUALITY = 'medium'; - -const DEFAULT_SETTINGS = { - 'printer': printerSettings, - 'quality': qualitySettings, - 'material': materialSettings -}; - class Settings extends React.Component { constructor(props) { super(props); this.state = { - settings: { - ...baseSettings, - ...printerSettings[DEFAULT_PRINTER], - ...qualitySettings[DEFAULT_MATERIAL], - ...materialSettings[DEFAULT_MATERIAL], - title: null - }, - printer: DEFAULT_PRINTER, - quality: DEFAULT_QUALITY, - material: DEFAULT_MATERIAL + settings: props.initalSettings, + printers: props.defaultPrinter, + quality: props.defaultQuality, + material: props.defaultMaterial }; } changeSettings = (fieldName, value) => { + const { onChange } = this.props; + + let state; switch (fieldName) { - case 'printer': + case 'printers': case 'quality': case 'material': - this.setState({ + state = { [fieldName]: value, - settings: { - ...this.state.settings, - ...DEFAULT_SETTINGS[fieldName][value], - title: null - } - }); + settings: _.merge({}, this.state.settings, this.props[fieldName][value]) + }; break; default: - this.setState(_.set(this.state, fieldName, value)); + state = _.set(_.cloneDeep(this.state), fieldName, value); break; } + if (onChange) onChange(state.settings); + if (state) this.setState(state); }; getChildContext() { @@ -74,24 +55,24 @@ class Settings extends React.Component { } render() { - const { classes } = this.props; + const { classes, printers, quality, material } = this.props; return (
- - {Object.entries(printerSettings).map(([value, { title }]) => ( + + {Object.entries(printers).map(([value, { title }]) => ( ))} - {Object.entries(qualitySettings).map(([value, { title }]) => ( + {Object.entries(quality).map(([value, { title }]) => ( ))} - {Object.entries(materialSettings).map(([value, { title }]) => ( + {Object.entries(material).map(([value, { title }]) => ( ))} @@ -169,7 +150,14 @@ Settings.childContextTypes = { }; Settings.propTypes = { classes: PropTypes.objectOf(PropTypes.string), - onChange: PropTypes.func + onChange: PropTypes.func, + printers: PropTypes.object.isRequired, + defaultPrinter: PropTypes.string.isRequired, + quality: PropTypes.object.isRequired, + defaultQuality: PropTypes.string.isRequired, + material: PropTypes.object.isRequired, + defaultMaterial: PropTypes.string.isRequired, + initalSettings: PropTypes.object.isRequired }; export default injectSheet(styles)(Settings); diff --git a/src/interface/index.js b/src/interface/index.js index 16c5ede..6bbb6ef 100644 --- a/src/interface/index.js +++ b/src/interface/index.js @@ -1,3 +1,4 @@ +import _ from 'lodash'; import React from 'react'; import * as THREE from 'three'; import PropTypes from 'proptypes'; @@ -10,6 +11,21 @@ import Slider from 'material-ui/Slider'; import { grey50 } from 'material-ui/styles/colors'; import Settings from './Settings.js'; import baseSettings from '../settings/default.yml'; +import printerSettings from '../settings/printer.yml'; +import materialSettings from '../settings/material.yml'; +import qualitySettings from '../settings/quality.yml'; + +const DEFAULT_PRINTER = 'ultimaker2'; +const DEFAULT_MATERIAL = 'pla'; +const DEFAULT_QUALITY = 'medium'; + +const INITIAL_SETTINGS = _.merge( + {}, + baseSettings, + printerSettings[DEFAULT_PRINTER], + qualitySettings[DEFAULT_MATERIAL], + materialSettings[DEFAULT_MATERIAL] +); const styles = { container: { @@ -54,7 +70,8 @@ class Interface extends React.Component { this.state = { controlMode: 'translate', isSlicing: false, - sliced: false + sliced: false, + settings: INITIAL_SETTINGS }; } @@ -90,9 +107,9 @@ class Interface extends React.Component { }; slice = async () => { - const { mesh, render, scene, control } = this.state; + const { mesh, render, scene, control, settings } = this.state; - const { dimensions } = baseSettings; + const { dimensions } = settings; const centerX = dimensions.x / 2; const centerY = dimensions.y / 2; @@ -102,7 +119,7 @@ class Interface extends React.Component { this.setState({ isSlicing: true, progress: { actions: [], percentage: 0 } }); const matrix = new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix); - const gcode = await sliceGeometry(baseSettings, geometry, matrix, false, true, ({ progress }) => { + const gcode = await sliceGeometry(settings, geometry, matrix, false, true, ({ progress }) => { this.setState({ progress: { actions: [...this.state.progress.actions, progress.action], percentage: progress.done / progress.total @@ -125,6 +142,10 @@ class Interface extends React.Component { render(); }; + onChangeSettings = (settings) => { + this.setState({ settings }); + }; + updateDrawRange = (event, value) => { const { gcode, render } = this.state; gcode.linePreview.geometry.setDrawRange(0, value); @@ -137,12 +158,17 @@ class Interface extends React.Component { } componentWillUpdate(nextProps, nextState) { - const { control } = this.state; + const { control, box, render } = this.state; if (control && nextState.controlMode !== this.state.controlMode) control.setMode(nextState.controlMode); + if (box && nextState.settings.dimensions !== this.state.settings.dimensions) { + const { dimensions } = nextState.settings; + box.scale.set(dimensions.y, dimensions.z, dimensions.x); + render(); + } } render() { - const { width, height, classes, onCompleteActions, printers, materials, quality } = this.props; + const { width, height, classes, onCompleteActions } = this.props; const { sliced, isSlicing, progress, gcode, controlMode } = this.state; return ( @@ -166,7 +192,16 @@ class Interface extends React.Component { />
} {!sliced && - + } {sliced && diff --git a/src/interface/utils.js b/src/interface/utils.js index a40faa3..159ba1f 100644 --- a/src/interface/utils.js +++ b/src/interface/utils.js @@ -1,7 +1,6 @@ import * as THREE from 'three'; import 'three/examples/js/controls/EditorControls'; import 'three/examples/js/controls/TransformControls'; -import printerSettings from '../settings/printer.yml'; export function placeOnGround(mesh) { const boundingBox = new THREE.Box3().setFromObject(mesh); @@ -12,7 +11,7 @@ export function placeOnGround(mesh) { export function createScene(canvas, props, state) { const { width, height, geometry } = props; - const { controlMode } = state; + const { controlMode, settings } = state; // center geometry geometry.computeBoundingBox(); @@ -69,10 +68,10 @@ export function createScene(canvas, props, state) { box.material.color.setHex(0x72bcd4); scene.add(box); - const { dimensions } = printerSettings['ultimaker2']; + const { dimensions } = settings; box.scale.set(dimensions.y, dimensions.z, dimensions.x); render(); - return { control, editorControls, scene, mesh, camera, renderer, render }; + return { control, editorControls, scene, mesh, camera, renderer, render, box }; }