Added user configuration of transition duration

Resolves #52.

Author: magjac

src/Graph.js

@@ -153,7 +153,7 @@ class Graph extends React.Component {
       this.renderGraphReady = true;
       this.setZoomScale(1, true);
       this.graphviz
-        .transition(() => d3_transition().duration(1000));
+        .transition(() => d3_transition().duration(this.props.transitionDuration * 1000));
       this.props.onInitialized();
     }
     if (this.pendingUpdate) {

src/SettingsDialog.js

@@ -47,6 +47,9 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'space-between',
   },
+  transitionDuration: {
+    width: '7.6em',
+  },
   group: {
     marginTop: theme.spacing.unit * 1,
     marginLeft: theme.spacing.unit * 0,
@@ -86,6 +89,10 @@ class SettingsDialog extends React.Component {
     this.props.onFitGraphSwitchChange(event.target.checked);
   };
 
+  handleTransitionDurationChange = (event) => {
+    this.props.onTransitionDurationChange(event.target.value);
+  };
+
   handleTweenPathsSwitchChange = (event) => {
     this.props.onTweenPathsSwitchChange(event.target.checked);
   };
@@ -188,6 +195,26 @@ class SettingsDialog extends React.Component {
                 label="Fit graph to available area"
               />
             </FormGroup>
+            <FormControl
+              className={classes.formControl}
+              aria-describedby="transition-duration-helper-text"
+            >
+              <InputLabel shrink={true}>Transition duration</InputLabel>
+              <Input
+                className={classes.transitionDuration}
+                id="transition-duration"
+                type="number"
+                value={this.props.transitionDuration}
+                onChange={this.handleTransitionDurationChange}
+                endAdornment={<InputAdornment position="end"> seconds</InputAdornment>}
+                inputProps={{
+                  'aria-label': 'transitionDuration',
+                  min: 0.1,
+                  max: 99,
+                  step: 0.1,
+                }}
+              />
+            </FormControl>
             <FormGroup row>
               <FormControlLabel
                 className={classes.formControlLabel}

src/pages/index.js

@@ -54,6 +54,7 @@ class Index extends React.Component {
       mouseOperationsDialogIsOpen: false,
       aboutDialogIsOpen: false,
       fitGraph : localStorage.getItem('fitGraph') === 'true',
+      transitionDuration: localStorage.getItem('transitionDuration') || 1,
       tweenPaths : localStorage.getItem('tweenPaths') !== 'false',
       tweenShapes : localStorage.getItem('tweenShapes') !== 'false',
       tweenPrecision : localStorage.getItem('tweenPrecision') || '1%',
@@ -183,6 +184,12 @@ class Index extends React.Component {
     });
   }
 
+  handleTransitionDurationChange = (transitionDuration) => {
+    this.setPersistentState({
+      transitionDuration: transitionDuration,
+    });
+  }
+
   handleTweenPathsSwitchChange = (tweenPaths) => {
     this.setPersistentState({
       tweenPaths: tweenPaths,
@@ -420,11 +427,13 @@ class Index extends React.Component {
           open={this.state.settingsDialogIsOpen}
           engine={this.state.engine}
           fitGraph={this.state.fitGraph}
+          transitionDuration={this.state.transitionDuration}
           tweenPaths={this.state.tweenPaths}
           tweenShapes={this.state.tweenShapes}
           tweenPrecision={this.state.tweenPrecision}
           onEngineSelectChange={this.handleEngineSelectChange}
           onFitGraphSwitchChange={this.handleFitGraphSwitchChange}
+          onTransitionDurationChange={this.handleTransitionDurationChange}
           onTweenPathsSwitchChange={this.handleTweenPathsSwitchChange}
           onTweenShapesSwitchChange={this.handleTweenShapesSwitchChange}
           onTweenPrecisionChange={this.handleTweenPrecisionChange}
@@ -499,6 +508,7 @@ class Index extends React.Component {
                 dotSrc={this.state.dotSrc}
                 engine={this.state.engine}
                 fit={this.state.fitGraph}
+                transitionDuration={this.state.transitionDuration}
                 tweenPaths={this.state.tweenPaths}
                 tweenShapes={this.state.tweenShapes}
                 tweenPrecision={this.state.tweenPrecision}