Resizable Winrate Graph

src/components/WinrateGraph.js

@@ -3,20 +3,32 @@ const {h, Component} = require('preact')
 const helper = require('../modules/helper')
 const setting = remote.require('./setting')
 
+let winrateGraphMinHeight = setting.get('view.winrategraph_minheight')
 let winrateGraphHeight = setting.get('view.winrategraph_height')
 
 class WinrateGraph extends Component {
     constructor() {
         super()
 
+        this.state = {
+            sidebarWinrateGraphSplit: setting.get('view.winrategraph_height'),
+            sidebarWinrateGraphSplitTransition: true
+        }
+
         this.handleMouseDown = evt => {
             this.mouseDown = true
             document.dispatchEvent(new MouseEvent('mousemove', evt))
         }
+
+        this.handleHorizontalResizerWinrateMouseDown = ({button}) => {
+            if (button !== 0) return
+            this.horizontalResizerWinrateMouseDown = true
+        }
     }
 
     shouldComponentUpdate({width, currentIndex, data}) {
         return width !== this.props.width
+            || winrateGraphHeight !== this.state.sidebarWinrateGraphSplit
             || currentIndex !== this.props.currentIndex
             || data[currentIndex] !== this.props.data[currentIndex]
     }
@@ -25,6 +37,16 @@ class WinrateGraph extends Component {
         document.addEventListener('mousemove', evt => {
             if (!this.mouseDown) return
 
+            if (this.horizontalResizerWinrateMouseDown) {
+              evt.preventDefault()
+
+              let sidebarWinrateGraphSplit = Math.min(
+                500, Math.max(winrateGraphMinHeight, evt.clientY)
+              )
+              this.setState({sidebarWinrateGraphSplit, sidebarWinrateGraphSplitTransition: false})
+              return
+            }
+
             let rect = this.element.getBoundingClientRect()
             let percent = (evt.clientX - rect.left) / rect.width
             let {width, data, onCurrentIndexChange = helper.noop} = this.props
@@ -34,22 +56,38 @@ class WinrateGraph extends Component {
         })
 
         document.addEventListener('mouseup', () => {
+            if (this.horizontalResizerWinrateMouseDown) {
+                this.horizontalResizerWinrateMouseDown = false
+                setting.set('view.winrategraph_height', this.state.sidebarWinrateGraphSplit)
+                this.setState({sidebarWinrateGraphSplitTransition: false})
+                window.dispatchEvent(new Event('resize'))
+            }
             this.mouseDown = false
         })
+
     }
 
     render({width, currentIndex, data}) {
         let dataDiff = data.map((x, i) => i === 0 || x == null || data[i - 1] == null ? null : x - data[i - 1])
         let dataDiffMax = Math.max(...dataDiff.map(Math.abs), 25)
 
         return h('section',
+
             {
                 ref: el => this.element = el,
                 id: 'winrategraph',
-                style: {height: winrateGraphHeight},
+                style: {
+                    transition: this.sidebarWinrateGraphSplitTransition ? null : 'none',
+                    height: this.state.sidebarWinrateGraphSplit + 'px'
+                },
                 onMouseDown: this.handleMouseDown
             },
 
+            h('div', {
+                class: 'horizontalresizer',
+                onMouseDown: this.handleHorizontalResizerWinrateMouseDown
+            }),
+
             h('svg',
                 {
                     viewBox: `0 0 ${width} 100`,

src/setting.js

@@ -117,6 +117,7 @@ let defaults = {
     'view.sidebar_width': 200,
     'view.sidebar_minwidth': 100,
     'view.winrategraph_height': 60,
+    'view.winrategraph_minheight': 25,
     'infooverlay.duration': 2000,
     'window.height': 604,
     'window.minheight': 440,

style/index.css

@@ -474,6 +474,15 @@ header, #bar .bar {
         overflow: hidden;
         z-index: 3;
     }
+    #winrategraph .horizontalresizer {
+        position: absolute;
+        bottom: 0px;
+        left: 0;
+        right: 0;
+        height: 5px;
+        cursor: ns-resize;
+        z-index: 10;
+    }
     #winrategraph svg {
         position: absolute;
         top: 0;