Merge pull request #54 from magjac/user-configuration-of-transitions

magjac · web-flow · commit 43c959ae7b60 · 2018-09-19T12:25:48.000+02:00
User configuration of transitions
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   "dependencies": {
     "@material-ui/core": "^1.5.0",
     "@material-ui/icons": "^1.1.0",
-    "d3-graphviz": "^2.5.1",
+    "d3-graphviz": "^2.6.0",
     "d3-scale-chromatic": "^1.3.0",
     "d3-selection": "^1.3.0",
     "d3-transition": "^1.1.1",
diff --git a/src/Graph.js b/src/Graph.js
@@ -131,6 +131,9 @@ class Graph extends React.Component {
       .height(height)
       .engine(engine)
       .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));
   }
@@ -150,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) {
diff --git a/src/SettingsDialog.js b/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,23 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'space-between',
   },
+  transitionDuration: {
+    width: '7.6em',
+  },
+  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',
   },
@@ -69,6 +89,34 @@ 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);
+  };
+
+  handleTweenShapesSwitchChange = (event) => {
+    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);
   };
@@ -83,6 +131,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
@@ -140,6 +195,89 @@ 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}
+                control={
+                  <Switch
+                    checked={this.props.tweenPaths}
+                    onChange={this.handleTweenPathsSwitchChange}
+                  />
+                }
+                label="Enable path tweening during transitions"
+              />
+            </FormGroup>
+            <FormGroup row>
+              <FormControlLabel
+                className={classes.formControlLabel}
+                control={
+                  <Switch
+                    checked={this.props.tweenShapes}
+                    onChange={this.handleTweenShapesSwitchChange}
+                  />
+                }
+                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}}>
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -54,6 +54,10 @@ 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%',
       engine : localStorage.getItem('engine') || 'dot',
       defaultNodeAttributes: JSON.parse(localStorage.getItem('defaultNodeAttributes')) || {},
       defaultEdgeAttributes: JSON.parse(localStorage.getItem('defaultEdgeAttributes')) || {},
@@ -180,6 +184,30 @@ class Index extends React.Component {
     });
   }
 
+  handleTransitionDurationChange = (transitionDuration) => {
+    this.setPersistentState({
+      transitionDuration: transitionDuration,
+    });
+  }
+
+  handleTweenPathsSwitchChange = (tweenPaths) => {
+    this.setPersistentState({
+      tweenPaths: tweenPaths,
+    });
+  }
+
+  handleTweenShapesSwitchChange = (tweenShapes) => {
+    this.setPersistentState({
+      tweenShapes: tweenShapes,
+    });
+  }
+
+  handleTweenPrecisionChange = (tweenPrecision) => {
+    this.setPersistentState({
+      tweenPrecision: tweenPrecision,
+    });
+  }
+
   handleHoldOffChange = (holdOff) => {
     this.setPersistentState({
       holdOff: holdOff,
@@ -399,8 +427,16 @@ 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}
           holdOff={this.state.holdOff}
           onHoldOffChange={this.handleHoldOffChange}
           fontSize={this.state.fontSize}
@@ -472,6 +508,10 @@ 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}
                 defaultNodeAttributes={this.state.defaultNodeAttributes}
                 defaultEdgeAttributes={this.state.defaultEdgeAttributes}
                 onTextChange={this.handleTextChange}
