better resize handling

example/index.js

@@ -11,6 +11,9 @@ injectTapEventPlugin();
 
 document.body.style.margin = 0;
 document.body.style.padding = 0;
+document.body.style.height = '100%';
+document.documentElement.style.height = '100%'
+document.getElementById('app').style.height = '100%';
 
 const downloadGCode = gcode => {
   const file = new File([gcode], 'gcode.gcode', { type: 'text/plain' });
@@ -23,8 +26,6 @@ jsonLoader.load(fileURL, geometry => {
     <MuiThemeProvider>
       <Interface
         geometry={geometry}
-        width={window.innerWidth}
-        height={window.innerHeight}
         onCompleteActions={[{ title: 'Download', callback: downloadGCode }]}
       />
     </MuiThemeProvider>

package-lock.json

@@ -3362,6 +3362,14 @@
         "theming": "1.1.0"
       }
     },
+    "react-resize-detector": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-1.1.0.tgz",
+      "integrity": "sha512-68KVcQlhcWQGXMAie82YueCa4f4yqwEoiQbVyYlSgJEin1zMtNBLLeU/+6FLNf1TTgjwSfpbMTJTw/uU0HNgtQ==",
+      "requires": {
+        "prop-types": "15.6.0"
+      }
+    },
     "react-transition-group": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "react": "^16.1.0",
     "react-dom": "^16.1.0",
     "react-jss": "^7.2.0",
+    "react-resize-detector": "^1.1.0",
     "three": "^0.83.0"
   },
   "devDependencies": {

src/interface/Settings.js

@@ -10,10 +10,6 @@ import { grey500 } from 'material-ui/styles/colors';
 const styles = {
   textFieldRow: {
     display: 'flex'
-  },
-  content: {
-    maxHeight: '500px',
-    overflowY: 'auto'
   }
 };
 
@@ -59,8 +55,8 @@ class Settings extends React.Component {
 
     return (
       <Tabs>
-        <Tab label="basic settings">
+        <Tab label="basic">
-          <div className={classes.content}>
+          <div>
             <SelectField name="printers" floatingLabelText="Printer" fullWidth>
               {Object.entries(printers).map(([value, { title }]) => (
                 <MenuItem key={value} value={value} primaryText={title} />
@@ -78,8 +74,8 @@ class Settings extends React.Component {
             </SelectField>
           </div>
         </Tab>
-        <Tab label="advanced settings">
+        <Tab label="advanced">
-          <div className={classes.content}>
+          <div>
             <SettingsGroup name="Printer dimensions">
               <div className={classes.textFieldRow}>
                 <TextField name="settings.dimensions.x" fullWidth floatingLabelText="X" type="number" />

src/interface/index.js

@@ -6,34 +6,40 @@ import { placeOnGround, createScene, createGcodeGeometry } from './utils.js';
 import injectSheet from 'react-jss';
 import { sliceGeometry } from '../slicer.js';
 import RaisedButton from 'material-ui/RaisedButton';
-import Paper from 'material-ui/Paper';
 import Slider from 'material-ui/Slider';
-import { grey50 } from 'material-ui/styles/colors';
+import { grey100, grey300 } 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';
+import ReactResizeDetector from 'react-resize-detector';
 
 const styles = {
   container: {
     position: 'relative',
-    backgroundColor: grey50
+    display: 'flex',
-  },
+    height: '100%',
-  canvas: {
+    backgroundColor: grey100,
-    position: 'absolute',
+    overflow: 'hidden'
   },
   controlBar: {
     position: 'absolute',
     bottom: '10px',
     left: '10px'
   },
+  d3View: {
+    flexGrow: 1
+  },
+  canvas: {
+    position: 'absolute'
+  },
   sliceBar: {
-    position: 'absolute',
+    width: '240px',
-    top: '10px',
+    padding: '0 10px',
-    right: '10px',
+    overflowY: 'auto',
-    width: '380px',
+    backgroundColor: 'white',
-    padding: '10px 20px',
+    borderLeft: `1px solid ${grey300}`
   },
   overlay: {
     position: 'absolute',
@@ -164,24 +170,34 @@ class Interface extends React.Component {
       render();
     }
     if (setSize && nextProps.width !== this.props.width || nextProps.height !== this.props.height || nextProps.pixelRatio !== this.props.pixelRatio) {
-      console.log('update pixel ratio');
       setSize(nextProps.width, nextProps.height, nextProps.pixelRatio);
     }
   }
 
+  onResize = (width, height) => {
+    window.requestAnimationFrame(() => {
+      const { setSize } = this.state;
+      const { pixelRatio } = this.props;
+      setSize(width, height, pixelRatio);
+    });
+  };
+
   render() {
     const { width, height, classes, onCompleteActions, defaultPrinter, defaultQuality, defaultMaterial } = this.props;
     const { sliced, isSlicing, progress, gcode, controlMode, settings } = this.state;
 
     return (
-      <div style={{ width, height }} className={classes.container}>
+      <div className={classes.container}>
-        <canvas className={classes.canvas} ref="canvas" width={width} height={height} />
+        <div className={classes.d3View}>
-        {!sliced && <div className={classes.controlBar}>
+          <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
+          <canvas className={classes.canvas} ref="canvas" width={width} height={height} />
+          {!sliced && <div className={classes.controlBar}>
           <RaisedButton className={classes.controlButton} onTouchTap={this.resetMesh} primary label="reset" />
           <RaisedButton className={classes.controlButton} disabled={controlMode === 'translate'} onTouchTap={() => this.setState({ controlMode: 'translate' })} primary label="translate" />
           <RaisedButton className={classes.controlButton} disabled={controlMode === 'rotate'} onTouchTap={() => this.setState({ controlMode: 'rotate' })} primary label="rotate" />
           <RaisedButton className={classes.controlButton} disabled={controlMode === 'scale'} onTouchTap={() => this.setState({ controlMode: 'scale' })} primary label="scale" />
-        </div>}
+          </div>}
+        </div>
         {sliced && <div className={classes.controlBar}>
           <Slider
             axis="y"
@@ -193,7 +209,7 @@ class Interface extends React.Component {
             onChange={this.updateDrawRange}
           />
         </div>}
-        {!sliced && <Paper className={classes.sliceBar}>
+        {!sliced && <div className={classes.sliceBar}>
           <Settings
             printers={printerSettings}
             defaultPrinter={defaultPrinter}
@@ -205,13 +221,13 @@ class Interface extends React.Component {
             onChange={this.onChangeSettings}
           />
           <RaisedButton className={classes.button} fullWidth disabled={isSlicing} onTouchTap={this.slice} primary label="slice" />
-        </Paper>}
+        </div>}
-        {sliced && <Paper className={classes.sliceBar}>
+        {sliced && <div className={classes.sliceBar}>
           <RaisedButton className={classes.button} fullWidth onTouchTap={this.reset} primary label="slice again" />
           {onCompleteActions.map(({ title, callback }, i) => (
             <RaisedButton className={classes.button} key={i} fullWidth onTouchTap={() => callback(gcode.gcode, settings)} primary label={title} />
           ))}
-        </Paper>}
+        </div>}
         {isSlicing && <div className={classes.overlay}>
           <p>Slicing: {progress.percentage.toLocaleString(navigator.language, { style: 'percent' })}</p>
           <ul className={classes.sliceActions}>
@@ -228,8 +244,6 @@ Interface.propTypes = {
       throw new Error('invalid prop, is not geometry');
     }
   },
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
   classes: PropTypes.objectOf(PropTypes.string),
   onCompleteActions: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string, callback: PropTypes.func })).isRequired,
   defaultSettings: PropTypes.object.isRequired,
@@ -249,8 +263,6 @@ Interface.defaultProps = {
   defaultQuality: 'medium',
   material: materialSettings,
   defaultMaterial: 'pla',
-  width: 720,
-  height: 480,
   pixelRatio: 1
 };
 

src/interface/utils.js

@@ -10,7 +10,7 @@ export function placeOnGround(mesh) {
 }
 
 export function createScene(canvas, props, state) {
-  const { width, height, geometry, pixelRatio } = props;
+  const { geometry, pixelRatio } = props;
   const { controlMode, settings } = state;
 
   // center geometry
@@ -78,7 +78,5 @@ export function createScene(canvas, props, state) {
   const { dimensions } = settings;
   box.scale.set(dimensions.y, dimensions.z, dimensions.x);
 
-  setSize(width, height, pixelRatio);
-
   return { control, editorControls, scene, mesh, camera, renderer, render, box, setSize };
 }