From dc6c1d7575b9f7219282302c59d6af097fbfd79c Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Sun, 12 Nov 2017 16:58:59 +0100 Subject: [PATCH] replace with material ui --- package-lock.json | 11 ++ package.json | 1 + simpleExample/index.js | 8 +- simpleExample/package-lock.json | 253 ++++++++++++++++++++++++++++++++ simpleExample/package.json | 2 + src/interface/index.js | 61 ++++---- 6 files changed, 305 insertions(+), 31 deletions(-) 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' })}