From 8fb25646bdbd0a9269274a6ce33e123ae04545cb Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Wed, 9 Mar 2022 13:13:03 +1300 Subject: [PATCH 1/6] Initial pass: reset pane width on browser resize --- shared/naturalcrit/splitPane/splitPane.jsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 1b4cee5ae..6d4dc95c4 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -10,7 +10,6 @@ const SplitPane = createClass({ return { storageKey : 'naturalcrit-pane-split', onDragFinish : function(){} //fires when dragging - }; }, getInitialState : function() { @@ -26,6 +25,17 @@ const SplitPane = createClass({ size : paneSize }); } + window.addEventListener('resize', this.resetSize); + }, + + componentWillUnmount : function() { + window.removeEventListener('resize', this.resetSize); + }, + + resetSize : function() { + this.setState({ + size : window.innerWidth / 2 + }); }, handleUp : function(){ From 39d338e5bffeb89bf816730a713efecc9b401a0d Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Wed, 9 Mar 2022 13:19:07 +1300 Subject: [PATCH 2/6] Reset position in local storage on divider reset --- shared/naturalcrit/splitPane/splitPane.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 6d4dc95c4..12ed7c8cf 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -33,6 +33,7 @@ const SplitPane = createClass({ }, resetSize : function() { + window.localStorage.removeItem(this.props.storageKey); this.setState({ size : window.innerWidth / 2 }); From f8abca6053323ead554cfb55054019544394a43c Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Wed, 9 Mar 2022 16:45:21 +1300 Subject: [PATCH 3/6] Formatting change - space out functions correctly --- shared/naturalcrit/splitPane/splitPane.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 12ed7c8cf..1e539495c 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -12,12 +12,14 @@ const SplitPane = createClass({ onDragFinish : function(){} //fires when dragging }; }, + getInitialState : function() { return { size : null, isDragging : false }; }, + componentDidMount : function() { const paneSize = window.localStorage.getItem(this.props.storageKey); if(paneSize){ From e44bbae07a767af9958a2cc0766db88ea8ab47b5 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Wed, 9 Mar 2022 17:55:24 +1300 Subject: [PATCH 4/6] Use percentage based positioning, not reset --- shared/naturalcrit/splitPane/splitPane.jsx | 34 +++++++++++++++------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 1e539495c..37b23e57d 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -15,8 +15,9 @@ const SplitPane = createClass({ getInitialState : function() { return { - size : null, - isDragging : false + size : null, + screenWidth : 0, + isDragging : false }; }, @@ -24,23 +25,34 @@ const SplitPane = createClass({ const paneSize = window.localStorage.getItem(this.props.storageKey); if(paneSize){ this.setState({ - size : paneSize + size : paneSize, + screenWidth : window.innerWidth }); } - window.addEventListener('resize', this.resetSize); + window.addEventListener('resize', this.changeSize); }, componentWillUnmount : function() { - window.removeEventListener('resize', this.resetSize); + window.removeEventListener('resize', this.changeSize); }, - resetSize : function() { - window.localStorage.removeItem(this.props.storageKey); + changeSize : function() { + const oldWidth = this.state.screenWidth; + const oldLoc = this.state.size; + const newLoc = this.limitPosition(window.innerWidth * (oldLoc / oldWidth)); this.setState({ - size : window.innerWidth / 2 + size : newLoc, + screenWidth : window.innerWidth }); }, + limitPosition : function(x) { + const minWidth = 1; + const maxWidth = window.innerWidth - 13; + const result = Math.min(maxWidth, Math.max(minWidth, x)); + return result; + }, + handleUp : function(){ if(this.state.isDragging){ this.props.onDragFinish(this.state.size); @@ -48,16 +60,16 @@ const SplitPane = createClass({ } this.setState({ isDragging: false }); }, + handleDown : function(){ this.setState({ isDragging: true }); //this.unFocus() }, + handleMove : function(e){ if(!this.state.isDragging) return; - const minWidth = 1; - const maxWidth = window.innerWidth - 13; - const newSize = Math.min(maxWidth, Math.max(minWidth, e.pageX)); + const newSize = this.limitPosition(e.pageX); this.setState({ size : newSize }); From 257262e3cc9545d708abcf914c052cc835a09b07 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 22 Mar 2022 10:26:29 +1300 Subject: [PATCH 5/6] Allow divider to grow back to original position --- shared/naturalcrit/splitPane/splitPane.jsx | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 37b23e57d..cefc0ecf0 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -26,6 +26,7 @@ const SplitPane = createClass({ if(paneSize){ this.setState({ size : paneSize, + dividerSize : paneSize, screenWidth : window.innerWidth }); } @@ -37,19 +38,24 @@ const SplitPane = createClass({ }, changeSize : function() { - const oldWidth = this.state.screenWidth; const oldLoc = this.state.size; - const newLoc = this.limitPosition(window.innerWidth * (oldLoc / oldWidth)); + const oldWidth = this.state.screenWidth; + let newLoc = oldLoc; + // Allow divider to increase in size to original position + if(window.innerWidth > oldWidth) { + newLoc = Math.min(oldLoc * (window.innerWidth / this.state.screenWidth), this.state.dividerSize); + } + // Limit current position to between 10% and 90% of visible space + newLoc = this.limitPosition(newLoc, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)); + this.setState({ size : newLoc, screenWidth : window.innerWidth }); }, - limitPosition : function(x) { - const minWidth = 1; - const maxWidth = window.innerWidth - 13; - const result = Math.min(maxWidth, Math.max(minWidth, x)); + limitPosition : function(x, min = 1, max = window.innerWidth - 13) { + const result = Math.round(Math.min(max, Math.max(min, x))); return result; }, @@ -71,7 +77,8 @@ const SplitPane = createClass({ const newSize = this.limitPosition(e.pageX); this.setState({ - size : newSize + size : newSize, + dividerSize : newSize }); }, /* From 8bab346cbb4db7f7ef725dce4ece83b9fbdbcd4f Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Wed, 23 Mar 2022 16:21:37 -0400 Subject: [PATCH 6/6] Change var names, simplify resize logic, limit on page refresh --- shared/naturalcrit/splitPane/splitPane.jsx | 46 ++++++++++------------ 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index cefc0ecf0..4d138e30b 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -15,42 +15,36 @@ const SplitPane = createClass({ getInitialState : function() { return { - size : null, - screenWidth : 0, - isDragging : false + currentDividerPos : null, + windowWidth : 0, + isDragging : false }; }, componentDidMount : function() { - const paneSize = window.localStorage.getItem(this.props.storageKey); - if(paneSize){ + const dividerPos = window.localStorage.getItem(this.props.storageKey); + if(dividerPos){ this.setState({ - size : paneSize, - dividerSize : paneSize, - screenWidth : window.innerWidth + currentDividerPos : this.limitPosition(dividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)), + userSetDividerPos : dividerPos, + windowWidth : window.innerWidth }); } - window.addEventListener('resize', this.changeSize); + window.addEventListener('resize', this.handleWindowResize); }, componentWillUnmount : function() { - window.removeEventListener('resize', this.changeSize); + window.removeEventListener('resize', this.handleWindowResize); }, - changeSize : function() { - const oldLoc = this.state.size; - const oldWidth = this.state.screenWidth; - let newLoc = oldLoc; - // Allow divider to increase in size to original position - if(window.innerWidth > oldWidth) { - newLoc = Math.min(oldLoc * (window.innerWidth / this.state.screenWidth), this.state.dividerSize); - } + handleWindowResize : function() { + // Allow divider to increase in size to last user-set position // Limit current position to between 10% and 90% of visible space - newLoc = this.limitPosition(newLoc, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)); + const newLoc = this.limitPosition(this.state.userSetDividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)); this.setState({ - size : newLoc, - screenWidth : window.innerWidth + currentDividerPos : newLoc, + windowWidth : window.innerWidth }); }, @@ -61,8 +55,8 @@ const SplitPane = createClass({ handleUp : function(){ if(this.state.isDragging){ - this.props.onDragFinish(this.state.size); - window.localStorage.setItem(this.props.storageKey, this.state.size); + this.props.onDragFinish(this.state.currentDividerPos); + window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos); } this.setState({ isDragging: false }); }, @@ -77,8 +71,8 @@ const SplitPane = createClass({ const newSize = this.limitPosition(e.pageX); this.setState({ - size : newSize, - dividerSize : newSize + currentDividerPos : newSize, + userSetDividerPos : newSize }); }, /* @@ -102,7 +96,7 @@ const SplitPane = createClass({ render : function(){ return
- {this.props.children[0]} + {this.props.children[0]} {this.renderDivider()} {this.props.children[1]}
;