fix(RodEditor): Add slider to control zScale

CASL · Apr 30, 2018 · a8ca282 · a8ca282
1 parent fddecfc
commit a8ca282
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 9 deletions.
diff --git a/src/simput/RodEditor.js b/src/simput/RodEditor.js
@@ -193,6 +193,7 @@ export default class RodEditor extends React.Component {
             viewUp={[1, 0, 0]}
             zoom={10}
             zScaling={0.1}
+            zRange={[1, 0.01]}
           />
         </div>
         <EditableList

diff --git a/src/widgets/VTKWidget.js b/src/widgets/VTKWidget.js
@@ -8,17 +8,23 @@ export default class VTKWidget extends React.Component {
   constructor(props) {
     super(props);
 
+    let zSlider = 1;
+    if (props.zRange) {
+      const [a, b] = props.zRange;
+      zSlider = Math.abs(Math.round(100 * (props.zScaling - a) / (b - a)));
+    }
+
     this.state = {
       parallelRendering: false,
-      zScaling: 1,
       capture: null,
+      zSlider,
     };
 
     // Functions for callback
-    this.onScaleChange = macro.throttle(this.onScaleChange.bind(this), 100);
     this.toggleParallelRendering = this.toggleParallelRendering.bind(this);
     this.resize = macro.throttle(props.viewer.resize, 100);
     this.resetCamera = this.resetCamera.bind(this);
+    this.sliderZScale = this.sliderZScale.bind(this);
   }
 
   componentDidMount() {
@@ -46,29 +52,44 @@ export default class VTKWidget extends React.Component {
     this.props.viewer.setContainer(null);
   }
 
-  onScaleChange(zScaling) {
-    this.setState({ zScaling });
-    this.props.viewer.setZScale(zScaling);
-  }
-
   toggleParallelRendering(parallelRendering) {
     this.setState({ parallelRendering });
     this.props.viewer.setParallelRendering(parallelRendering);
   }
 
   resetCamera() {
-    this.props.viewer.render();
     this.props.viewer.resetCamera(
       this.props.orientation,
       this.props.viewUp,
       this.props.zoom
     );
   }
 
+  sliderZScale(e) {
+    const zSlider = Number(e.target.value);
+    const [a, b] = this.props.zRange;
+    this.setState({ zSlider });
+
+    const zScaling = a + (b - a) * zSlider / 100;
+    this.props.viewer.setZScale(zScaling);
+    this.resetCamera();
+  }
+
   render() {
     return (
       <div className={style.container}>
         <div className={style.resetCamera} onClick={this.resetCamera} />
+        {this.props.zRange ? (
+          <input
+            type="range"
+            min="0"
+            max="100"
+            value={this.state.zSlider}
+            step="1"
+            className={style.slider}
+            onChange={this.sliderZScale}
+          />
+        ) : null}
         <div
           className={style.container}
           ref={(c) => {
@@ -87,6 +108,7 @@ VTKWidget.propTypes = {
   viewUp: PropTypes.array,
   zoom: PropTypes.number,
   zScaling: PropTypes.number,
+  zRange: PropTypes.array,
 };
 
 VTKWidget.defaultProps = {
@@ -95,4 +117,5 @@ VTKWidget.defaultProps = {
   viewUp: [0, 1, 0],
   zoom: 1,
   zScaling: 1,
+  zRange: null,
 };
diff --git a/src/widgets/VTKWidget.mcss b/src/widgets/VTKWidget.mcss
@@ -5,7 +5,7 @@
 
 .resetCamera {
   position: absolute;
-  top: 10px;
+  top: 5px;
   right: 10px;
   width: 20px;
   height: 20px;
@@ -15,3 +15,11 @@
   cursor: pointer;
 }
 
+.slider {
+  position: absolute;
+  top: 5px;
+  right: 40px;
+  width: 100px;
+  z-index: 1;
+  height: 20px;
+}