add basic gui-controls

package.json

@@ -39,6 +39,7 @@
     "classnames": "^2.2.5",
     "codemirror": "^5.39.2",
     "country-data": "^0.0.31",
+    "dat.gui": "^0.7.2",
     "dom-scroll-into-view": "^1.2.1",
     "electron-dl": "^1.11.0",
     "electron-is-dev": "^0.3.0",

src/renderer/component/viewers/threeViewer/index.jsx

@@ -1,6 +1,8 @@
 // @flow
 import * as React from 'react';
+import * as dat from 'dat.gui';
 import LoadingScreen from 'component/common/loading-screen';
+
 // ThreeJS
 import * as THREE from './internal/three';
 import detectWebGL from './internal/detector';
@@ -26,11 +28,8 @@ type State = {
 
 class ThreeViewer extends React.PureComponent<Props, State> {
   static testWebgl = new Promise((resolve, reject) => {
-    if (detectWebGL()) {
-      resolve();
-    } else {
-      reject();
-    }
+    if (detectWebGL()) resolve();
+    else reject();
   });
 
   static createGeometry(data) {
@@ -84,6 +83,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     // Main container
     this.viewer = React.createRef();
 
+    this.guiContainer = React.createRef();
+
     // Object colors
     this.materialColors = {
       red: '#e74c3c',
@@ -164,6 +165,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       console.info('after', this.renderer.info.programs.length);
       // Stop animation
       cancelAnimationFrame(this.frameID);
+      // Destroy GUI Controls
+      if (this.gui) this.gui.destroy();
       // Empty objects
       this.grid = null;
       this.mesh = null;
@@ -177,6 +180,29 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.updateControlsTarget(group.position);
   }
 
+  createInterfaceControls() {
+    if (this.guiContainer && this.mesh) {
+      this.gui = new dat.GUI({ autoPlace: false });
+
+      const { material } = this.mesh;
+
+      const config = {
+        wireframe: false,
+        color: '#44b098',
+      };
+
+      const colorPicker = this.gui.addColor(config, 'color');
+
+      colorPicker.onChange(color => {
+        material.color.set(color);
+      });
+
+      this.gui.add(material, 'wireframe').listen();
+
+      this.guiContainer.current.appendChild(this.gui.domElement);
+    }
+  }
+
   createOrbitControls(camera, canvas) {
     const { autoRotate } = this.props;
     const controls = new THREE.OrbitControls(camera, canvas);
@@ -209,6 +235,9 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
   handleReady = () => {
     this.setState({ isReady: true, isLoading: false });
+
+    // GUI
+    this.createInterfaceControls();
   };
 
   handleError = () => {
@@ -223,12 +252,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.renderer.setSize(width, height);
   };
 
-  handleColorChange(color) {
-    if (!this.mesh) return;
-    const pickColor = this.materialColors[color] || this.materialColors.green;
-    this.mesh.material.color.set(pickColor);
-  }
-
   updateControlsTarget(point) {
     this.controls.target.fromArray([point.x, point.y, point.z]);
     this.controls.update();
@@ -342,6 +365,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       <React.Fragment>
         {error && <LoadingScreen status={error} spinner={false} />}
         {showLoading && <LoadingScreen status={loadingMessage} spinner />}
+        <div ref={this.guiContainer} className="gui-container" />
         <div
           style={{ opacity: showViewer ? 1 : 0 }}
           className="three-viewer file-render__viewer"

src/renderer/scss/component/_file-render.scss

@@ -85,3 +85,16 @@
     display: none;
   }
 }
+
+.gui-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+
+  .dg.main {
+    padding: 0;
+    margin: 0;
+    overflow: inherit;
+  }
+}

yarn.lock

@@ -2490,6 +2490,10 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dat.gui@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/dat.gui/-/dat.gui-0.7.2.tgz#57056f286d0f989e83f5adec196f24fd69c01ae3"
+
 date-fns@^1.27.2:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"