All files / src/components graph-controls.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7x
 
 
 
 
4x
4x
 
 
 
 
25x
25x
 
 
 
 
4x
4x
4x
4x
 
4x
2x
 
 
 
 
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// @flow
/*
  Copyright(c) 2018 Uber Technologies, Inc.
 
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
 
          http://www.apache.org/licenses/LICENSE-2.0
 
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/
 
/*
  Zoom slider and zoom to fit controls for GraphView
*/
 
import React from 'react';
import FaExpand from 'react-icons/lib/fa/expand';
 
const steps = 100; // Slider steps
 
type IGraphControlProps = {
  maxZoom?: number;
  minZoom?: number;
  zoomLevel: number;
  zoomToFit: (event: SyntheticMouseEvent<HTMLButtonElement>) => void;
  modifyZoom: (delta: number) => boolean;
}
 
class GraphControls extends React.Component<IGraphControlProps> {
  static defaultProps = {
    maxZoom: 1.5,
    minZoom: 0.15
  };
 
  constructor(props: IGraphControlProps) {
    super(props);
  }
 
  // Convert slider val (0-steps) to original zoom value range
  sliderToZoom(val: number) {
    const { minZoom, maxZoom } = this.props;
    return val * ((maxZoom || 0) - (minZoom || 0)) / steps + (minZoom || 0);
  }
 
  // Convert zoom val (minZoom-maxZoom) to slider range
  zoomToSlider(val: number) {
    const { minZoom, maxZoom } = this.props;
    return (val - (minZoom || 0)) * steps / ((maxZoom || 0) - (minZoom || 0));
  }
 
  // Modify current zoom of graph-view
  zoom = (e: any) => {
    const { minZoom, maxZoom } = this.props;
    const sliderVal = e.target.value;
    const zoomLevelNext = this.sliderToZoom(sliderVal);
    const delta = zoomLevelNext - this.props.zoomLevel;
 
    if (zoomLevelNext <= (maxZoom || 0) && zoomLevelNext >= (minZoom || 0)) {
      this.props.modifyZoom(delta);
    }
  }
 
  render() {
    return (
      <div className="graph-controls">
        <div className="slider-wrapper">
          <span>-</span>
          <input
            type="range"
            className="slider"
            min={this.zoomToSlider(this.props.minZoom || 0)}
            max={this.zoomToSlider(this.props.maxZoom || 0)}
            value={this.zoomToSlider(this.props.zoomLevel)}
            onChange={this.zoom}
            step="1"
          />
          <span>+</span>
        </div>
        <button className="slider-button" onMouseDown={this.props.zoomToFit}>
          <FaExpand />
        </button>
      </div>
    );
  }
}
 
export default GraphControls;