diff --git a/package-lock.json b/package-lock.json
index feca351..dabf2ee 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index b7adc5c..adb63aa 100644
--- a/package.json
+++ b/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"
},
diff --git a/simpleExample/index.js b/simpleExample/index.js
index dc1ad06..525bc1a 100644
--- a/simpleExample/index.js
+++ b/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((
-
+
-
+
), document.getElementById('app'));
});
diff --git a/simpleExample/package-lock.json b/simpleExample/package-lock.json
index 137d738..b1f6470 100644
--- a/simpleExample/package-lock.json
+++ b/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",
diff --git a/simpleExample/package.json b/simpleExample/package.json
index b467c59..6042aa3 100644
--- a/simpleExample/package.json
+++ b/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"
},
diff --git a/src/interface/index.js b/src/interface/index.js
index eeae2cd..2177c3f 100644
--- a/src/interface/index.js
+++ b/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,
- left: 0
+ bottom: '10px',
+ left: '10px'
},
sliceBar: {
position: 'absolute',
- top: 0,
- right: 0
+ top: '10px',
+ 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 (
{!sliced &&
-
-
-
-
+
+ this.setState({ controlMode: 'translate' })} primary label="translate" />
+ this.setState({ controlMode: 'rotate' })} primary label="rotate" />
+ this.setState({ controlMode: 'scale' })} primary label="scale" />
}
{sliced &&
-
}
- {!sliced &&
-
-
}
- {sliced &&
-
+ {!sliced &&
+
+ }
+ {sliced &&
+
{onCompleteActions.map(({ title, callback }, i) => (
-
+ callback(gcode.gcode)} primary label={title} />
))}
- }
+ }
{isSlicing &&
Slicing: {progress.percentage.toLocaleString(navigator.language, { style: 'percent' })}