settings now work

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: {
+      settings: props.initalSettings,
-        ...baseSettings,
+      printers: props.defaultPrinter,
-        ...printerSettings[DEFAULT_PRINTER],
+      quality: props.defaultQuality,
-        ...qualitySettings[DEFAULT_MATERIAL],
+      material: props.defaultMaterial
-        ...materialSettings[DEFAULT_MATERIAL],
-        title: null
-      },
-      printer: DEFAULT_PRINTER,
-      quality: DEFAULT_QUALITY,
-      material: DEFAULT_MATERIAL
     };
   }
 
   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: {
+          settings: _.merge({}, this.state.settings, this.props[fieldName][value])
-            ...this.state.settings,
+        };
-            ...DEFAULT_SETTINGS[fieldName][value],
-            title: null
-          }
-        });
         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 (
       <Tabs>
         <Tab label="basic settings">
           <div className={classes.content}>
-            <SelectField name="printer" floatingLabelText="Printer" fullWidth onChange={this.changeSettings}>
+            <SelectField name="printers" floatingLabelText="Printer" fullWidth onChange={this.changeSettings}>
-              {Object.entries(printerSettings).map(([value, { title }]) => (
+              {Object.entries(printers).map(([value, { title }]) => (
                 <MenuItem key={value} value={value} primaryText={title} />
               ))}
             </SelectField>
             <SelectField name="quality" floatingLabelText="Quality" fullWidth onChange={this.changeSettings}>
-              {Object.entries(qualitySettings).map(([value, { title }]) => (
+              {Object.entries(quality).map(([value, { title }]) => (
                 <MenuItem key={value} value={value} primaryText={title} />
               ))}
             </SelectField>
             <SelectField name="material" floatingLabelText="Material" fullWidth onChange={this.changeSettings}>
-              {Object.entries(materialSettings).map(([value, { title }]) => (
+              {Object.entries(material).map(([value, { title }]) => (
                 <MenuItem key={value} value={value} primaryText={title} />
               ))}
             </SelectField>
@@ -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);

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 {
           />
         </div>}
         {!sliced && <Paper className={classes.sliceBar}>
-          <Settings printers={printers} />
+          <Settings
+            printers={printerSettings}
+            defaultPrinter={DEFAULT_PRINTER}
+            quality={qualitySettings}
+            defaultQuality={DEFAULT_QUALITY}
+            material={materialSettings}
+            defaultMaterial={DEFAULT_MATERIAL}
+            initalSettings={INITIAL_SETTINGS}
+            onChange={this.onChangeSettings}
+          />
           <RaisedButton className={classes.button} fullWidth disabled={isSlicing} onTouchTap={this.slice} primary label="slice" />
         </Paper>}
         {sliced && <Paper className={classes.sliceBar}>

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 };
 }