mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-07-01 00:31:21 +02:00
replace with material ui
This commit is contained in:
casperlamboo
parent
9c233b1ab6
commit
dc6c1d7575
11
package-lock.json
generated
11
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
});
|
||||
|
|
|
|||
253
simpleExample/package-lock.json
generated
253
simpleExample/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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>
|
||||
<button onClick={() => this.setState({ controlMode: 'translate' })}>Translate</button>
|
||||
<button onClick={() => this.setState({ controlMode: 'rotate' })}>Rotate</button>
|
||||
<button onClick={() => this.setState({ controlMode: 'scale' })}>Scale</button>
|
||||
<RaisedButton onTouchTap={this.resetMesh} primary label="reset" />
|
||||
<RaisedButton disabled={controlMode === 'translate'} onTouchTap={() => this.setState({ controlMode: 'translate' })} primary label="translate" />
|
||||
<RaisedButton disabled={controlMode === 'rotate'} onTouchTap={() => this.setState({ controlMode: 'rotate' })} primary label="rotate" />
|
||||
<RaisedButton disabled={controlMode === 'scale'} onTouchTap={() => this.setState({ controlMode: 'scale' })} primary label="scale" />
|
||||
</div>}
|
||||
{sliced && <div className={classes.controlBar}>
|
||||
<input
|
||||
type="range"
|
||||
step="2"
|
||||
min="1"
|
||||
<Slider
|
||||
axis="y"
|
||||
style={{ height: '300px' }}
|
||||
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}>
|
||||
<button onClick={this.slice}>Slice</button>
|
||||
</div>}
|
||||
{sliced && <div className={classes.sliceBar}>
|
||||
<button onClick={this.reset}>Slice Again</button>
|
||||
{!sliced && <Paper className={classes.sliceBar}>
|
||||
<RaisedButton fullWidth disabled={isSlicing} onTouchTap={this.slice} primary label="slice" />
|
||||
</Paper>}
|
||||
{sliced && <Paper className={classes.sliceBar}>
|
||||
<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}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user