Added user configuration of tweening precision

Resolves #44.

Author: magjac

src/Graph.js

@@ -133,6 +133,7 @@ class Graph extends React.Component {
       .fit(fit)
       .tweenPaths(this.props.tweenPaths)
       .tweenShapes(this.props.tweenShapes)
+      .tweenPrecision(this.props.tweenPrecision)
       .dot(this.props.dotSrc, this.handleDotLayoutReady.bind(this))
       .render(this.handleRenderGraphReady.bind(this));
   }

src/SettingsDialog.js

@@ -9,6 +9,9 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormLabel from '@material-ui/core/FormLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
 import Switch from '@material-ui/core/Switch';
 import Input from '@material-ui/core/Input';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -44,6 +47,20 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'space-between',
   },
+  group: {
+    marginTop: theme.spacing.unit * 1,
+    marginLeft: theme.spacing.unit * 0,
+  },
+  tweenPrecisionAbsoluteInput: {
+    marginTop: theme.spacing.unit * 1,
+    marginLeft: theme.spacing.unit * 1.5,
+    width: '6.9em',
+  },
+  tweenPrecisionRelativeInput: {
+    marginTop: theme.spacing.unit * 1,
+    marginLeft: theme.spacing.unit * 1.5,
+    width: '4.8em',
+  },
   holdOffInput: {
     width: '7.6em',
   },
@@ -77,6 +94,22 @@ class SettingsDialog extends React.Component {
     this.props.onTweenShapesSwitchChange(event.target.checked);
   };
 
+  handleTweenPrecisionChange = (event) => {
+    let tweenPrecision = event.target.value;
+    if (event.target.value === 'absolute' || tweenPrecision > 1) {
+      tweenPrecision = Math.max(Math.ceil(tweenPrecision), 1);
+    }
+    this.props.onTweenPrecisionChange(tweenPrecision.toString() + (this.props.tweenPrecision.includes('%') ? '%': ''));
+  };
+
+  handleTweenPrecisionIsRelativeRadioChange = (event) => {
+    let tweenPrecision = +this.props.tweenPrecision.split('%')[0];
+    if (event.target.value === 'absolute' || tweenPrecision > 1) {
+      tweenPrecision = Math.max(Math.ceil(tweenPrecision), 1);
+    }
+    this.props.onTweenPrecisionChange(tweenPrecision.toString() + (event.target.value === 'relative' ? '%': ''));
+  };
+
   handleHoldOffChange = (event) => {
     this.props.onHoldOffChange(event.target.value);
   };
@@ -91,6 +124,13 @@ class SettingsDialog extends React.Component {
 
   render() {
     const { classes } = this.props;
+    const tweenPrecisionIsRelative = this.props.tweenPrecision.includes('%');
+    const tweenPrecision = +this.props.tweenPrecision.split('%')[0];
+    const tweenPrecisionType = tweenPrecisionIsRelative ? 'relative' :  'absolute';
+    const tweenPrecisionUnit = tweenPrecisionIsRelative ? '%' :  'points';
+    const enableTweenPrecisionSetting = this.props.tweenPaths || this.props.tweenShapes;
+    const tweenPrecisionStep = (tweenPrecisionIsRelative && tweenPrecision <= 1) ? 0.1 : 1;
+    const tweenPrecisionInputClass = tweenPrecisionIsRelative ? classes.tweenPrecisionRelativeInput : classes.tweenPrecisionAbsoluteInput;
     return (
       <div>
         <Dialog
@@ -172,6 +212,45 @@ class SettingsDialog extends React.Component {
                 label="Enable shape tweening during transitions"
               />
             </FormGroup>
+            <FormControl component="fieldset" className={classes.formControl}>
+              <FormLabel component="legend">Tweening precision</FormLabel>
+              <RadioGroup
+                name="tweenPrecision"
+                className={classes.group}
+                value={tweenPrecisionType}
+                onChange={this.handleTweenPrecisionIsRelativeRadioChange}
+              >
+                <FormControlLabel
+                  className={classes.formControlLabel}
+                  value="absolute"
+                  disabled={!enableTweenPrecisionSetting}
+                  control={<Radio />}
+                  label="Absolute"
+                />
+                <FormControlLabel
+                  className={classes.formControlLabel}
+                  value="relative"
+                  disabled={!enableTweenPrecisionSetting}
+                  control={<Radio />}
+                  label="Relative"
+                />
+              </RadioGroup>
+              <Input
+                className={tweenPrecisionInputClass}
+                id="tween-precision"
+                type="number"
+                value={tweenPrecision}
+                disabled={!enableTweenPrecisionSetting}
+                onChange={this.handleTweenPrecisionChange}
+                endAdornment={<InputAdornment position="end"> {tweenPrecisionUnit} </InputAdornment>}
+                inputProps={{
+                  'aria-label': 'tweenPrecision',
+                  min: tweenPrecisionStep,
+                  max: tweenPrecisionIsRelative ? 100 : 999,
+                  step: tweenPrecisionStep,
+                }}
+              />
+            </FormControl>
           </DialogContent>
           <DialogTitle id="form-dialog-title">Text Editor</DialogTitle>
           <DialogContent classes={{root: classes.root}}>

src/pages/index.js

@@ -56,6 +56,7 @@ class Index extends React.Component {
       fitGraph : localStorage.getItem('fitGraph') === 'true',
       tweenPaths : localStorage.getItem('tweenPaths') !== 'false',
       tweenShapes : localStorage.getItem('tweenShapes') !== 'false',
+      tweenPrecision : localStorage.getItem('tweenPrecision') || '1%',
       engine : localStorage.getItem('engine') || 'dot',
       defaultNodeAttributes: JSON.parse(localStorage.getItem('defaultNodeAttributes')) || {},
       defaultEdgeAttributes: JSON.parse(localStorage.getItem('defaultEdgeAttributes')) || {},
@@ -194,6 +195,12 @@ class Index extends React.Component {
     });
   }
 
+  handleTweenPrecisionChange = (tweenPrecision) => {
+    this.setPersistentState({
+      tweenPrecision: tweenPrecision,
+    });
+  }
+
   handleHoldOffChange = (holdOff) => {
     this.setPersistentState({
       holdOff: holdOff,
@@ -415,10 +422,12 @@ class Index extends React.Component {
           fitGraph={this.state.fitGraph}
           tweenPaths={this.state.tweenPaths}
           tweenShapes={this.state.tweenShapes}
+          tweenPrecision={this.state.tweenPrecision}
           onEngineSelectChange={this.handleEngineSelectChange}
           onFitGraphSwitchChange={this.handleFitGraphSwitchChange}
           onTweenPathsSwitchChange={this.handleTweenPathsSwitchChange}
           onTweenShapesSwitchChange={this.handleTweenShapesSwitchChange}
+          onTweenPrecisionChange={this.handleTweenPrecisionChange}
           holdOff={this.state.holdOff}
           onHoldOffChange={this.handleHoldOffChange}
           fontSize={this.state.fontSize}
@@ -492,6 +501,7 @@ class Index extends React.Component {
                 fit={this.state.fitGraph}
                 tweenPaths={this.state.tweenPaths}
                 tweenShapes={this.state.tweenShapes}
+                tweenPrecision={this.state.tweenPrecision}
                 defaultNodeAttributes={this.state.defaultNodeAttributes}
                 defaultEdgeAttributes={this.state.defaultEdgeAttributes}
                 onTextChange={this.handleTextChange}