replace with material ui

package-lock.json

@@ -3313,6 +3313,17 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-dom": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.1.0.tgz",
+      "integrity": "sha512-i9in5qW3H2PDinUPD9bnQK7tLAD8LhjYQ+fXi3nJOvVnxOO3ErHq6RNEnKY7pbjTPt155e74q7al8eBUuyLtew==",
+      "requires": {
+        "fbjs": "0.8.16",
+        "loose-envify": "1.3.1",
+        "object-assign": "4.1.1",
+        "prop-types": "15.6.0"
+      }
+    },
     "react-event-listener": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.5.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "material-ui": "^0.19.4",
     "proptypes": "^1.1.0",
     "react": "^16.1.0",
+    "react-dom": "^16.1.0",
     "react-jss": "^7.2.0",
     "three": "^0.83.0"
   },

simpleExample/index.js

@@ -4,6 +4,10 @@ import { Interface } from 'doodle3d-slicer';
 import fileURL from '!url-loader!./models/shape.json';
 import { render } from 'react-dom';
 import fileSaver from 'file-saver';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+
+injectTapEventPlugin();
 
 document.body.style.margin = 0;
 document.body.style.padding = 0;
@@ -16,13 +20,13 @@ const downloadGCode = gcode => {
 const jsonLoader = new THREE.JSONLoader();
 jsonLoader.load(fileURL, geometry => {
   render((
-    <div>
+    <MuiThemeProvider>
       <Interface
         geometry={geometry}
         width={window.innerWidth}
         height={window.innerHeight}
         onCompleteActions={[{ title: 'Download', callback: downloadGCode }]}
       />
-    </div>
+    </MuiThemeProvider>
   ), document.getElementById('app'));
 });

simpleExample/package-lock.json

@@ -940,6 +940,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bowser": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.8.1.tgz",
+      "integrity": "sha512-NMPaR8ILtdLSWzxQtEs16XbxMcY8ohWGQ5V+TZSJS3fNUt/PBAGkF6YWO9B/4qWE23bK3o0moQKq8UyFEosYkA=="
+    },
     "brace-expansion": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
@@ -1121,6 +1126,11 @@
         "lazy-cache": "1.0.4"
       }
     },
+    "chain-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.0.tgz",
+      "integrity": "sha1-DUqzfn4Y6tC9xHuSB2QRjOWHM9w="
+    },
     "chalk": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -1134,6 +1144,11 @@
         "supports-color": "2.0.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -1354,6 +1369,14 @@
         "randombytes": "2.0.5"
       }
     },
+    "css-in-js-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz",
+      "integrity": "sha512-yuWmPMD9FLi50Xf3k8W8oO3WM1eVnxEGCldCLyfusQ+CgivFk0s23yst4ooW6tfxMuSa03S6uUEga9UhX6GRrA==",
+      "requires": {
+        "hyphenate-style-name": "1.0.2"
+      }
+    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -1529,6 +1552,11 @@
         }
       }
     },
+    "dom-helpers": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.2.1.tgz",
+      "integrity": "sha1-MgPgf+0he9H0JLAZc1WC/Deyglo="
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -3073,6 +3101,11 @@
         "minimalistic-crypto-utils": "1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz",
+      "integrity": "sha1-ND24TGAYxlB3iJgkATWhQg7iLOA="
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -3278,6 +3311,11 @@
       "integrity": "sha1-P5E2XKvmC3ftDruiS0VOPgnZWoI=",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
+    },
     "iconv-lite": {
       "version": "0.4.19",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
@@ -3329,6 +3367,15 @@
       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
       "dev": true
     },
+    "inline-style-prefixer": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=",
+      "requires": {
+        "bowser": "1.8.1",
+        "css-in-js-utils": "2.0.0"
+      }
+    },
     "internal-ip": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-1.2.0.tgz",
@@ -3594,6 +3641,11 @@
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
       "dev": true
     },
+    "keycode": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
+      "integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
+    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -3663,6 +3715,16 @@
       "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
       "dev": true
     },
+    "lodash.merge": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.0.tgz",
+      "integrity": "sha1-aYhLoUSsM/5plzemCG3v+t0PicU="
+    },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "longest": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@@ -3708,6 +3770,24 @@
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
       "dev": true
     },
+    "material-ui": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-0.19.4.tgz",
+      "integrity": "sha1-ypzcqKqLtZTfrF2zjsn/BFoyNYc=",
+      "requires": {
+        "babel-runtime": "6.23.0",
+        "inline-style-prefixer": "3.0.8",
+        "keycode": "2.1.9",
+        "lodash.merge": "4.6.0",
+        "lodash.throttle": "4.1.1",
+        "prop-types": "15.6.0",
+        "react-event-listener": "0.5.1",
+        "react-transition-group": "1.2.1",
+        "recompose": "0.26.0",
+        "simple-assign": "0.1.0",
+        "warning": "3.0.0"
+      }
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -4450,6 +4530,103 @@
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
         "prop-types": "15.6.0"
+      },
+      "dependencies": {
+        "asap": {
+          "version": "2.0.6",
+          "bundled": true
+        },
+        "core-js": {
+          "version": "1.2.7",
+          "bundled": true
+        },
+        "encoding": {
+          "version": "0.1.12",
+          "bundled": true,
+          "requires": {
+            "iconv-lite": "0.4.19"
+          }
+        },
+        "fbjs": {
+          "version": "0.8.16",
+          "bundled": true,
+          "requires": {
+            "core-js": "1.2.7",
+            "isomorphic-fetch": "2.2.1",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1",
+            "promise": "7.3.1",
+            "setimmediate": "1.0.5",
+            "ua-parser-js": "0.7.17"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.4.19",
+          "bundled": true
+        },
+        "is-stream": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "isomorphic-fetch": {
+          "version": "2.2.1",
+          "bundled": true,
+          "requires": {
+            "node-fetch": "1.7.3",
+            "whatwg-fetch": "2.0.3"
+          }
+        },
+        "js-tokens": {
+          "version": "3.0.2",
+          "bundled": true
+        },
+        "loose-envify": {
+          "version": "1.3.1",
+          "bundled": true,
+          "requires": {
+            "js-tokens": "3.0.2"
+          }
+        },
+        "node-fetch": {
+          "version": "1.7.3",
+          "bundled": true,
+          "requires": {
+            "encoding": "0.1.12",
+            "is-stream": "1.1.0"
+          }
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true
+        },
+        "promise": {
+          "version": "7.3.1",
+          "bundled": true,
+          "requires": {
+            "asap": "2.0.6"
+          }
+        },
+        "prop-types": {
+          "version": "15.6.0",
+          "bundled": true,
+          "requires": {
+            "fbjs": "0.8.16",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1"
+          }
+        },
+        "setimmediate": {
+          "version": "1.0.5",
+          "bundled": true
+        },
+        "ua-parser-js": {
+          "version": "0.7.17",
+          "bundled": true
+        },
+        "whatwg-fetch": {
+          "version": "2.0.3",
+          "bundled": true
+        }
       }
     },
     "react-dom": {
@@ -4463,6 +4640,53 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-event-listener": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.5.1.tgz",
+      "integrity": "sha1-ujYHbke8N8Wmf/XM1Kn/DxViEEA=",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "fbjs": "0.8.16",
+        "prop-types": "15.6.0",
+        "warning": "3.0.0"
+      },
+      "dependencies": {
+        "babel-runtime": {
+          "version": "6.26.0",
+          "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+          "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+          "requires": {
+            "core-js": "2.4.1",
+            "regenerator-runtime": "0.11.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz",
+          "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A=="
+        }
+      }
+    },
+    "react-tap-event-plugin": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-tap-event-plugin/-/react-tap-event-plugin-3.0.2.tgz",
+      "integrity": "sha1-KANxZ3uIHDE3bgAnoLhtLG3gOe4=",
+      "requires": {
+        "fbjs": "0.8.16"
+      }
+    },
+    "react-transition-group": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
+      "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
+      "requires": {
+        "chain-function": "1.0.0",
+        "dom-helpers": "3.2.1",
+        "loose-envify": "1.3.1",
+        "prop-types": "15.6.0",
+        "warning": "3.0.0"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -4532,6 +4756,17 @@
         "set-immediate-shim": "1.0.1"
       }
     },
+    "recompose": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
+      "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
+      "requires": {
+        "change-emitter": "0.1.6",
+        "fbjs": "0.8.16",
+        "hoist-non-react-statics": "2.3.1",
+        "symbol-observable": "1.0.4"
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -4841,6 +5076,11 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
+    "simple-assign": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/simple-assign/-/simple-assign-0.1.0.tgz",
+      "integrity": "sha1-F/0wZqXz13OPUDIbsPFMooHMS6o="
+    },
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -5040,6 +5280,11 @@
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
       "dev": true
     },
+    "symbol-observable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz",
+      "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0="
+    },
     "tapable": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.6.tgz",
@@ -5283,6 +5528,14 @@
         "indexof": "0.0.1"
       }
     },
+    "warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+      "requires": {
+        "loose-envify": "1.3.1"
+      }
+    },
     "watchpack": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz",

simpleExample/package.json

@@ -14,8 +14,10 @@
     "file-saver": "^1.3.3",
     "html-webpack-template": "^6.0.2",
     "imports-loader": "^0.7.1",
+    "material-ui": "^0.19.4",
     "react": "^16.1.0",
     "react-dom": "^16.1.0",
+    "react-tap-event-plugin": "^3.0.2",
     "three": "^0.83.0",
     "url-loader": "^0.5.9"
   },

src/interface/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import * as THREE from 'three';
 import { placeOnGround, createScene, createGcodeGeometry } from './utils.js';
 import baseSettings from '../settings/default.yml';
 import printerSettings from '../settings/printer.yml';
@@ -7,7 +8,9 @@ import qualitySettings from '../settings/quality.yml';
 import PropTypes from 'proptypes';
 import injectSheet from 'react-jss';
 import { sliceGeometry } from '../slicer.js';
-import * as THREE from 'three';
+import RaisedButton from 'material-ui/RaisedButton';
+import Paper from 'material-ui/Paper';
+import Slider from 'material-ui/Slider';
 
 const styles = {
   container: {
@@ -18,13 +21,15 @@ const styles = {
   },
   controlBar: {
     position: 'absolute',
-    bottom: 0,
+    bottom: '10px',
-    left: 0
+    left: '10px'
   },
   sliceBar: {
     position: 'absolute',
-    top: 0,
+    top: '10px',
-    right: 0
+    right: '10px',
+    width: '300px',
+    padding: '10px 20px',
   },
   overlay: {
     position: 'absolute',
@@ -60,15 +65,12 @@ class Interface extends React.Component {
     defaultPrinter: PropTypes.string.isRequired,
     onCompleteActions: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string, callback: PropTypes.func })).isRequired,
   };
-  state = {
-    controlMode: 'translate',
-    isSlicing: false,
-    sliced: false
-  };
-
   constructor(props) {
     super(props);
     this.state = {
+      controlMode: 'translate',
+      isSlicing: false,
+      sliced: false,
       printer: props.defaultPrinter
     };
   }
@@ -146,9 +148,9 @@ class Interface extends React.Component {
     render();
   };
 
-  updateDrawRange = (event) => {
+  updateDrawRange = (event, value) => {
     const { gcode, render } = this.state;
-    gcode.linePreview.geometry.setDrawRange(0, event.target.value);
+    gcode.linePreview.geometry.setDrawRange(0, value);
     render();
   };
 
@@ -164,36 +166,37 @@ class Interface extends React.Component {
 
   render() {
     const { width, height, classes, onCompleteActions } = this.props;
-    const { sliced, isSlicing, progress, gcode } = this.state;
+    const { sliced, isSlicing, progress, gcode, controlMode } = this.state;
 
     return (
       <div style={{ width, height }} className={classes.container}>
         <canvas className={classes.canvas} ref="canvas" width={width} height={height} />
         {!sliced && <div className={classes.controlBar}>
-          <button onClick={this.resetMesh}>Reset</button>
+          <RaisedButton onTouchTap={this.resetMesh} primary label="reset" />
-          <button onClick={() => this.setState({ controlMode: 'translate' })}>Translate</button>
+          <RaisedButton disabled={controlMode === 'translate'} onTouchTap={() => this.setState({ controlMode: 'translate' })} primary label="translate" />
-          <button onClick={() => this.setState({ controlMode: 'rotate' })}>Rotate</button>
+          <RaisedButton disabled={controlMode === 'rotate'} onTouchTap={() => this.setState({ controlMode: 'rotate' })} primary label="rotate" />
-          <button onClick={() => this.setState({ controlMode: 'scale' })}>Scale</button>
+          <RaisedButton disabled={controlMode === 'scale'} onTouchTap={() => this.setState({ controlMode: 'scale' })} primary label="scale" />
         </div>}
         {sliced && <div className={classes.controlBar}>
-          <input
+          <Slider
-            type="range"
+            axis="y"
-            step="2"
+            style={{ height: '300px' }}
-            min="1"
+            step={2}
+            min={1}
             max={gcode.linePreview.geometry.getAttribute('position').count}
             defaultValue={gcode.linePreview.geometry.getAttribute('position').count}
             onChange={this.updateDrawRange}
           />
         </div>}
-        {!sliced && <div className={classes.sliceBar}>
+        {!sliced && <Paper className={classes.sliceBar}>
-          <button onClick={this.slice}>Slice</button>
+          <RaisedButton fullWidth disabled={isSlicing} onTouchTap={this.slice} primary label="slice" />
-        </div>}
+        </Paper>}
-        {sliced && <div className={classes.sliceBar}>
+        {sliced && <Paper className={classes.sliceBar}>
-          <button onClick={this.reset}>Slice Again</button>
+          <RaisedButton fullWidth onTouchTap={this.reset} primary label="slice again" />
           {onCompleteActions.map(({ title, callback }, i) => (
-            <button key={i} onClick={() => callback(gcode.gcode)}>{title}</button>
+            <RaisedButton key={i} fullWidth onTouchTap={() => callback(gcode.gcode)} primary label={title} />
           ))}
-        </div>}
+        </Paper>}
         {isSlicing && <div className={classes.overlay}>
           <p>Slicing: {progress.percentage.toLocaleString(navigator.language, { style: 'percent' })}</p>
           <ul className={classes.sliceActions}>