update tabs

2024-11-22 13:37:58 +01:00 · 2017-12-04 17:44:08 +01:00 · 2017-12-04 17:44:08 +01:00 · 9d14e40c21
commit 9d14e40c21
parent 65d44db405
3 changed files with 128 additions and 85 deletions
--- a/src/interface/Settings.js
+++ b/src/interface/Settings.js
@ -5,7 +5,7 @@ import { Tabs, Tab } from 'material-ui/Tabs';
 import MenuItem from 'material-ui/MenuItem';
 import injectSheet from 'react-jss';
 import { SelectField, TextField, Checkbox } from './FormComponents.js';
-import { grey900 } from 'material-ui/styles/colors';
+import { grey800, cyan500 } from 'material-ui/styles/colors';

 const styles = {
  textFieldRow: {
@ -13,7 +13,7 @@ const styles = {
  },
  text: {
    fontWeight: 'bold',
-    color: grey900
+    color: grey800
  },
  container: {
    width: '100%',
@ -91,8 +91,8 @@ class Settings extends React.Component {
          ))}
        </SelectField>
        <h3 className={classes.text}>Printer Setup</h3>
-        <Tabs>
-          <Tab label="basic">
+        <Tabs inkBarStyle={{ backgroundColor: cyan500 }}>
+          <Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Basic">
            <div>
              <SelectField name="quality" floatingLabelText="Quality" fullWidth>
                {Object.entries(quality).map(([value, { title }]) => (
@ -101,7 +101,7 @@ class Settings extends React.Component {
              </SelectField>
            </div>
          </Tab>
-          <Tab label="advanced">
+          <Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Advanced">
            <div>
              <p className={classes.text}>Printer dimensions</p>
              <div className={classes.textFieldRow}>
--- a/src/interface/index.js
+++ b/src/interface/index.js
@ -2,12 +2,13 @@ import _ from 'lodash';
 import React from 'react';
 import * as THREE from 'three';
 import PropTypes from 'proptypes';
-import { placeOnGround, createScene, fetchProgress, slice } from './utils.js';
+import { placeOnGround, createScene, fetchProgress, slice, TabTemplate } from './utils.js';
 import injectSheet from 'react-jss';
 import RaisedButton from 'material-ui/RaisedButton';
 import Slider from 'material-ui/Slider';
 import LinearProgress from 'material-ui/LinearProgress';
 import { grey100, grey300, red500 } from 'material-ui/styles/colors';
+import { Tabs, Tab } from 'material-ui/Tabs';
 import Settings from './Settings.js';
 import baseSettings from '../settings/default.yml';
 import printerSettings from '../settings/printer.yml';
@ -38,7 +39,7 @@ const styles = {
  canvas: {
    position: 'absolute'
  },
-  sliceBar: {
+  settingsBar: {
    display: 'flex',
    flexDirection: 'column',
    maxWidth: '380px',
@ -104,10 +105,7 @@ class Interface extends React.Component {
    const { defaultPrinter, defaultQuality, defaultMaterial, printers, quality, material, defaultSettings } = props;
    this.state = {
      controlMode: 'translate',
-      showFullScreen: {
-        active: false,
-        settings: true
-      },
+      showFullScreen: false,
      isSlicing: false,
      error: null,
      printers: defaultPrinter,
@ -206,6 +204,12 @@ class Interface extends React.Component {
    if (changed) render();
  }

+  componentDidUpdate() {
+    const { updateCanvas } = this.state;
+    const { canvas } = this.refs;
+    if (updateCanvas && canvas) updateCanvas(canvas);
+  }
+
  onResize3dView = (width, height) => {
    window.requestAnimationFrame(() => {
      const { setSize } = this.state;
@ -215,58 +219,17 @@ class Interface extends React.Component {
  };

  onResizeContainer = (width) => {
-    this.setState({
-      showFullScreen: {
-        active: width > MAX_FULLSCREEN_WIDTH,
-        settings: this.state.showFullScreen.settings
-      }
-    });
+    this.setState({ showFullScreen: width > MAX_FULLSCREEN_WIDTH });
  };

  render() {
    const { classes, onCompleteActions, defaultPrinter, defaultQuality, defaultMaterial } = this.props;
    const { isSlicing, progress, gcode, settings, printers, quality, material, showFullScreen, error } = this.state;

-    const showSettings = showFullScreen.active || showFullScreen.settings;
-    const showPreview = showFullScreen.active || !showFullScreen.settings;
-
    const percentage = progress ? (progress.uploading + progress.slicing) / 2.0 * 100.0 : 0.0;

-    const toggleFullScreen = () => {
-      this.setState({
-        showFullScreen: {
-          ...this.state.showFullScreen,
-          settings: !this.state.showFullScreen.settings
-        }
-      });
-    };
-
-    return (
-      <div className={classes.container}>
-        <ReactResizeDetector handleWidth handleHeight onResize={this.onResizeContainer} />
-        {<div style={{ display: showPreview ? 'inherit' : 'none' }} className={classes.d3View}>
-          <ReactResizeDetector handleWidth handleHeight onResize={this.onResize3dView} />
-          <canvas className={classes.canvas} ref="canvas" />
-          {!showFullScreen.active && <div className={classes.buttonContainer}>
-            <RaisedButton fullWidth label="Edit settings" onTouchTap={toggleFullScreen}/>
-          </div>}
-          {!isSlicing && <div className={classes.controlBar}>
-            <RaisedButton className={classes.controlButton} onTouchTap={this.resetMesh} label="reset" />
-            <RaisedButton className={classes.controlButton} onTouchTap={this.scaleUp} label="scale down" />
-            <RaisedButton className={classes.controlButton} onTouchTap={this.scaleDown} label="scale up" />
-            <RaisedButton className={classes.controlButton} onTouchTap={this.rotateX} label="rotate x" />
-            <RaisedButton className={classes.controlButton} onTouchTap={this.rotateY} label="rotate y" />
-            <RaisedButton className={classes.controlButton} onTouchTap={this.rotateZ} label="rotate z" />
-          </div>}
-        </div>}
-        <div
-          className={classes.sliceBar}
-          style={{
-            display: showSettings ? 'inherit' : 'none',
-            ...showPreview ? {} : { maxWidth: 'inherit', width: '100%' }
-          }}
-        >
-          {!showFullScreen.active && <RaisedButton label="Edit model" onTouchTap={toggleFullScreen}/>}
+    const settingsPanel = (
+      <div className={classes.settingsBar} style={{ ...(showFullScreen ? {} : { maxWidth: 'inherit', width: '100%', height: '100%' }) }}>
        <Settings
          disabled={isSlicing}
          printers={printerSettings}
@ -293,9 +256,53 @@ class Interface extends React.Component {
          </div>
        </div>
      </div>
+    );
+
+    const d3Panel = (
+      <div className={classes.d3View}>
+        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize3dView} />
+        <canvas className={classes.canvas} ref="canvas" />
+        {!isSlicing && <div className={classes.controlBar}>
+          <RaisedButton className={classes.controlButton} onTouchTap={this.resetMesh} label="reset" />
+          <RaisedButton className={classes.controlButton} onTouchTap={this.scaleUp} label="scale down" />
+          <RaisedButton className={classes.controlButton} onTouchTap={this.scaleDown} label="scale up" />
+          <RaisedButton className={classes.controlButton} onTouchTap={this.rotateX} label="rotate x" />
+          <RaisedButton className={classes.controlButton} onTouchTap={this.rotateY} label="rotate y" />
+          <RaisedButton className={classes.controlButton} onTouchTap={this.rotateZ} label="rotate z" />
+        </div>}
+      </div>
+    );
+
+    if (showFullScreen) {
+      return (
+        <div className={classes.container}>
+          <ReactResizeDetector handleWidth handleHeight onResize={this.onResizeContainer} />
+          {d3Panel}
+          {settingsPanel}
+        </div>
+      );
+    } else {
+      return (
+        <div className={classes.container}>
+          <ReactResizeDetector handleWidth handleHeight onResize={this.onResizeContainer} />
+          <Tabs
+            style={{ width: '100%', display: 'flex', flexDirection: 'column' }}
+            tabItemContainerStyle={{ flexShrink: 0 }}
+            contentContainerStyle={{ flexGrow: 1, display: 'flex' }}
+            tabTemplateStyle={{ display: 'flex' }}
+            tabTemplate={TabTemplate}
+          >
+            <Tab label="Settings">
+              {settingsPanel}
+            </Tab>
+            <Tab label="Preview">
+              {d3Panel}
+            </Tab>
+          </Tabs>
        </div>
      );
    }
  }
+}

 export default injectSheet(styles)(Interface);
--- a/src/interface/utils.js
+++ b/src/interface/utils.js
@ -4,6 +4,8 @@ import printerSettings from '../settings/printer.yml';
 import materialSettings from '../settings/material.yml';
 import qualitySettings from '../settings/quality.yml';
 import { sliceGeometry } from '../slicer.js';
+import React from 'react';
+import PropTypes from 'prop-types';

 export function placeOnGround(mesh) {
  const boundingBox = new THREE.Box3().setFromObject(mesh);
@ -44,11 +46,7 @@ export function createScene(canvas, props, state) {
  box.scale.set(dimensions.y, dimensions.z, dimensions.x);
  box.updateMatrix();

-  const editorControls = new THREE.EditorControls(camera, canvas);
-  editorControls.focus(mesh);
-
  const render = () => renderer.render(scene, camera);
-  editorControls.addEventListener('change', render);

  const setSize = (width, height, pixelRatio = 1) => {
    renderer.setSize(width, height);
@ -58,10 +56,21 @@ export function createScene(canvas, props, state) {
    render();
  };

+  let editorControls;
  let renderer;
  const updateCanvas = (canvas) => {
+    if (!renderer || renderer.domElement !== canvas) {
+      if (renderer) renderer.dispose();
      renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
      renderer.setClearColor(0xffffff, 0);
+    }
+    if (!editorControls || editorControls.domElement !== canvas) {
+      if (editorControls) editorControls.dispose();
+      editorControls = new THREE.EditorControls(camera, canvas);
+      editorControls.focus(mesh);
+      editorControls.addEventListener('change', render);
+    }
+
    render();
  };
  updateCanvas(canvas);
@ -143,3 +152,30 @@ export async function slice(mesh, settings, printers, quality, material, updateP
  const popup = window.open(`${CONNECT_URL}?uuid=${id}`, '_blank');
  if (!popup) throw new Error('popup was blocked by browser');
 }
+
+const styles = {
+  width: '100%',
+  position: 'relative',
+  textAlign: 'initial',
+};
+
+export const TabTemplate = ({children, selected, style}) => {
+  const templateStyle = Object.assign({}, styles, style);
+  if (!selected) {
+    templateStyle.height = 0;
+    templateStyle.width = 0;
+    templateStyle.overflow = 'hidden';
+  }
+
+  return (
+    <div style={templateStyle}>
+      {children}
+    </div>
+  );
+};
+
+TabTemplate.propTypes = {
+  children: PropTypes.node,
+  selected: PropTypes.bool,
+  style: PropTypes.object,
+};