From f8b5a8133ebb2f415a1748e5b1d92647d6033072 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 26 Oct 2024 16:15:53 +0200 Subject: [PATCH 1/7] initial commit --- shared/naturalcrit/splitPane/splitPane.jsx | 284 ++++++++------------ shared/naturalcrit/splitPane/splitPane.less | 3 + 2 files changed, 118 insertions(+), 169 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 23ae5d321..60fc5c997 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -1,200 +1,146 @@ require('./splitPane.less'); const React = require('react'); -const createClass = require('create-react-class'); +const { useState, useEffect, useRef } = React; const cx = require('classnames'); -const SplitPane = createClass({ - displayName : 'SplitPane', - getDefaultProps : function() { - return { - storageKey : 'naturalcrit-pane-split', - onDragFinish : function(){}, //fires when dragging - showDividerButtons : true - }; - }, +const SplitPane = (props) => { + props = { + storageKey : 'naturalcrit-pane-split', + onDragFinish : function(){}, //fires when dragging + showDividerButtons : true, + ...props + }; + const pane1 = useRef(null); + const pane2 = useRef(null); + const [currentDividerPos, setCurrentDividerPos] = useState(null); + const [userSetDividerPos, setUserSetDividerPos] = useState(null); + const [windowWidth, setWindowWidth] = useState(null); + const [isDragging, setIsDragging] = useState(false); + const [moveSource, setMoveSource] = useState(false); + const [moveBrew, setMoveBrew] = useState(false); + const [showMoveArrows, setShowMoveArrows] = useState(true); + const [liveScroll, setLiveScroll] = useState(false); - getInitialState : function() { - return { - currentDividerPos : null, - windowWidth : 0, - isDragging : false, - moveSource : false, - moveBrew : false, - showMoveArrows : true - }; - }, + const storageKey = props.storageKey || 'naturalcrit-pane-split'; + const onDragFinish = props.onDragFinish || (() => {}); - pane1 : React.createRef(null), - pane2 : React.createRef(null), + // Fetch saved divider position and scroll state on mount + useEffect(() => { + setWindowWidth(window.innerWidth); + const dividerPos = window.localStorage.getItem(storageKey); + const liveScrollSetting = window.localStorage.getItem('liveScroll') === 'true'; + setLiveScroll(liveScrollSetting); - componentDidMount : function() { - const dividerPos = window.localStorage.getItem(this.props.storageKey); - if(dividerPos){ - this.setState({ - currentDividerPos : this.limitPosition(dividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)), - userSetDividerPos : dividerPos, - windowWidth : window.innerWidth - }); + if (dividerPos) { + const limitedPos = limitPosition(dividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)); + setCurrentDividerPos(limitedPos); + setUserSetDividerPos(dividerPos); } else { - this.setState({ - currentDividerPos : window.innerWidth / 2, - userSetDividerPos : window.innerWidth / 2 - }); + setCurrentDividerPos(window.innerWidth / 2); + setUserSetDividerPos(window.innerWidth / 2); } - window.addEventListener('resize', this.handleWindowResize); - // This lives here instead of in the initial render because you cannot touch localStorage until the componant mounts. - const loadLiveScroll = window.localStorage.getItem('liveScroll') === 'true'; - this.setState({ liveScroll: loadLiveScroll }); - }, + const handleResize = () => { + const newPos = limitPosition(userSetDividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)); + setCurrentDividerPos(newPos); + setWindowWidth(window.innerWidth); + }; + window.addEventListener('resize', handleResize); - componentWillUnmount : function() { - window.removeEventListener('resize', this.handleWindowResize); - }, + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); - handleWindowResize : function() { - // Allow divider to increase in size to last user-set position - // Limit current position to between 10% and 90% of visible space - const newLoc = this.limitPosition(this.state.userSetDividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)); + const limitPosition = (x, min = 1, max = window.innerWidth - 13) => { + return Math.round(Math.min(max, Math.max(min, x))); + }; - this.setState({ - currentDividerPos : newLoc, - windowWidth : window.innerWidth - }); - }, - - limitPosition : function(x, min = 1, max = window.innerWidth - 13) { - const result = Math.round(Math.min(max, Math.max(min, x))); - return result; - }, - - handleUp : function(e){ + const handleUp = (e) => { e.preventDefault(); - if(this.state.isDragging){ - this.props.onDragFinish(this.state.currentDividerPos); - window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos); + if (isDragging) { + onDragFinish(currentDividerPos); + window.localStorage.setItem(storageKey, currentDividerPos); } - this.setState({ isDragging: false }); - }, + setIsDragging(false); + }; - handleDown : function(e){ + const handleDown = (e) => { e.preventDefault(); - this.setState({ isDragging: true }); - //this.unFocus() - }, - - handleMove : function(e){ - if(!this.state.isDragging) return; + setIsDragging(true); + }; + const handleMove = (e) => { + if (!isDragging) return; e.preventDefault(); - const newSize = this.limitPosition(e.pageX); - this.setState({ - currentDividerPos : newSize, - userSetDividerPos : newSize - }); - }, + const newSize = limitPosition(e.pageX); + setCurrentDividerPos(newSize); + setUserSetDividerPos(newSize); + }; - liveScrollToggle : function() { - window.localStorage.setItem('liveScroll', String(!this.state.liveScroll)); - this.setState({ liveScroll: !this.state.liveScroll }); - }, - /* - unFocus : function() { - if(document.selection){ - document.selection.empty(); - }else{ - window.getSelection().removeAllRanges(); + const liveScrollToggle = () => { + const newScrollState = !liveScroll; + window.localStorage.setItem('liveScroll', String(newScrollState)); + setLiveScroll(newScrollState); + }; + + const renderMoveArrows = () => { + console.log('showMoveArrows: ', showMoveArrows); + if (showMoveArrows) { + return ( + <> +
setMoveSource(!moveSource)}> + +
+
setMoveBrew(!moveBrew)}> + +
+
+ +
+ + ); } - }, - */ + }; - setMoveArrows : function(newState) { - if(this.state.showMoveArrows != newState){ - this.setState({ - showMoveArrows : newState - }); - } - }, - - renderMoveArrows : function(){ - if(this.state.showMoveArrows) { - return <> -
this.setState({ moveSource: !this.state.moveSource })} > - -
-
this.setState({ moveBrew: !this.state.moveBrew })} > - -
-
- -
- ; - } - }, - - renderDivider : function(){ - return <> - {this.props.showDividerButtons && this.renderMoveArrows()} -
-
- - - -
+ const renderDivider = () => ( +
+ {props.showDividerButtons && renderMoveArrows()} +
+ + +
- ; - }, +
+ ); - render : function(){ - return
- - {React.cloneElement(this.props.children[0], { - ...(this.props.showDividerButtons && { - moveBrew : this.state.moveBrew, - moveSource : this.state.moveSource, - liveScroll : this.state.liveScroll, - setMoveArrows : this.setMoveArrows, + return ( +
+ + {React.cloneElement(props.children[0], { + ...(props.showDividerButtons && { + moveBrew, + moveSource, + liveScroll, + setMoveArrows: setShowMoveArrows, }), })} - {this.renderDivider()} - {this.props.children[1]} -
; - } -}); + {renderDivider()} + {props.children[1]} +
+ ); +}; -const Pane = createClass({ - displayName : 'Pane', - getDefaultProps : function() { - return { - width : null - }; - }, - render : function(){ - let styles = {}; - if(this.props.width){ - styles = { - flex : 'none', - width : `${this.props.width}px` - }; - } else { - styles = { - pointerEvents : this.props.isDragging ? 'none' : 'auto' //Disable mouse capture in the rightmost pane; dragging into the iframe drops the divider otherwise - }; - } +const Pane = ({ width, children, isDragging, className }) => { + const styles = width + ? { flex: 'none', width: `${width}px` } + : { pointerEvents: isDragging ? 'none' : 'auto' }; - return
- {this.props.children} -
; - } -}); + return
{children}
; +}; module.exports = SplitPane; diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less index e5b3dd7f8..ba85dc3a7 100644 --- a/shared/naturalcrit/splitPane/splitPane.less +++ b/shared/naturalcrit/splitPane/splitPane.less @@ -11,6 +11,7 @@ flex : 1; } .divider{ + position:relative; touch-action : none; display : table; height : 100%; @@ -35,6 +36,8 @@ } .arrow{ position : absolute; + left:50%; + translate:-50%; width : 25px; height : 25px; border : 2px solid #bbb; From 843aa6d769f887082f5cf329dcc80577ccba9f5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 26 Oct 2024 16:45:33 +0200 Subject: [PATCH 2/7] linting and final pass --- shared/naturalcrit/splitPane/splitPane.jsx | 151 ++++++++------------ shared/naturalcrit/splitPane/splitPane.less | 66 ++++----- 2 files changed, 94 insertions(+), 123 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 60fc5c997..70dd98e43 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -3,112 +3,90 @@ const React = require('react'); const { useState, useEffect, useRef } = React; const cx = require('classnames'); -const SplitPane = (props) => { - props = { - storageKey : 'naturalcrit-pane-split', - onDragFinish : function(){}, //fires when dragging - showDividerButtons : true, - ...props - }; - const pane1 = useRef(null); - const pane2 = useRef(null); - const [currentDividerPos, setCurrentDividerPos] = useState(null); - const [userSetDividerPos, setUserSetDividerPos] = useState(null); - const [windowWidth, setWindowWidth] = useState(null); +const SplitPane = (props)=>{ + const { + storageKey = 'naturalcrit-pane-split', + onDragFinish = ()=>{}, + showDividerButtons = true + } = props; + const [isDragging, setIsDragging] = useState(false); + const [dividerPos, setDividerPos] = useState(null); // Initial divider position is set to `null` const [moveSource, setMoveSource] = useState(false); const [moveBrew, setMoveBrew] = useState(false); const [showMoveArrows, setShowMoveArrows] = useState(true); const [liveScroll, setLiveScroll] = useState(false); - const storageKey = props.storageKey || 'naturalcrit-pane-split'; - const onDragFinish = props.onDragFinish || (() => {}); + const dividerRef = useRef(null); - // Fetch saved divider position and scroll state on mount - useEffect(() => { - setWindowWidth(window.innerWidth); - const dividerPos = window.localStorage.getItem(storageKey); - const liveScrollSetting = window.localStorage.getItem('liveScroll') === 'true'; - setLiveScroll(liveScrollSetting); + // Set initial divider position and liveScroll only after mounting + useEffect(()=>{ + const savedPos = window.localStorage.getItem(storageKey); + setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2); + setLiveScroll(window.localStorage.getItem('liveScroll') === 'true'); - if (dividerPos) { - const limitedPos = limitPosition(dividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)); - setCurrentDividerPos(limitedPos); - setUserSetDividerPos(dividerPos); - } else { - setCurrentDividerPos(window.innerWidth / 2); - setUserSetDividerPos(window.innerWidth / 2); - } - - const handleResize = () => { - const newPos = limitPosition(userSetDividerPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)); - setCurrentDividerPos(newPos); - setWindowWidth(window.innerWidth); + const handleResize = ()=>{ + setDividerPos((pos)=>limitPosition(pos,0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) + ); }; window.addEventListener('resize', handleResize); + return ()=>window.removeEventListener('resize', handleResize); + }, [storageKey]); - return () => { - window.removeEventListener('resize', handleResize); - }; - }, []); - - const limitPosition = (x, min = 1, max = window.innerWidth - 13) => { + const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{ return Math.round(Math.min(max, Math.max(min, x))); }; - const handleUp = (e) => { + const handleUp =(e)=>{ e.preventDefault(); - if (isDragging) { - onDragFinish(currentDividerPos); - window.localStorage.setItem(storageKey, currentDividerPos); + if(isDragging) { + onDragFinish(dividerPos); + window.localStorage.setItem(storageKey, dividerPos); } setIsDragging(false); }; - const handleDown = (e) => { + const handleDown = (e)=>{ e.preventDefault(); setIsDragging(true); }; - const handleMove = (e) => { - if (!isDragging) return; + const handleMove = (e)=>{ + if(!isDragging) return; e.preventDefault(); const newSize = limitPosition(e.pageX); - setCurrentDividerPos(newSize); - setUserSetDividerPos(newSize); + setDividerPos(newSize); }; - const liveScrollToggle = () => { - const newScrollState = !liveScroll; - window.localStorage.setItem('liveScroll', String(newScrollState)); - setLiveScroll(newScrollState); + const liveScrollToggle = ()=>{ + window.localStorage.setItem('liveScroll', String(!liveScroll)); + setLiveScroll(!liveScroll); }; - const renderMoveArrows = () => { - console.log('showMoveArrows: ', showMoveArrows); - if (showMoveArrows) { - return ( - <> -
setMoveSource(!moveSource)}> - -
-
setMoveBrew(!moveBrew)}> - -
-
- -
- - ); - } - }; + const moveArrows = showMoveArrows && ( + <> + {['left', 'right'].map((direction, index) => ( +
setMoveSource(!moveSource) : () => setMoveBrew(!moveBrew)} + > + +
+ ))} +
+ +
+ + ); - const renderDivider = () => ( -
- {props.showDividerButtons && renderMoveArrows()} + const renderDivider = ()=>( +
+ {showDividerButtons && moveArrows}
@@ -119,28 +97,25 @@ const SplitPane = (props) => { return (
- - {React.cloneElement(props.children[0], { - ...(props.showDividerButtons && { - moveBrew, - moveSource, - liveScroll, - setMoveArrows: setShowMoveArrows, - }), - })} + + {props.children[0]} {renderDivider()} - {props.children[1]} + {props.children[1]}
); }; -const Pane = ({ width, children, isDragging, className }) => { +const Pane = ({ width, children, isDragging, className, moveBrew, moveSource, liveScroll, setMoveArrows })=>{ const styles = width ? { flex: 'none', width: `${width}px` } : { pointerEvents: isDragging ? 'none' : 'auto' }; - return
{children}
; + return ( +
+ {React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })} +
+ ); }; module.exports = SplitPane; diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less index ba85dc3a7..66e47ef23 100644 --- a/shared/naturalcrit/splitPane/splitPane.less +++ b/shared/naturalcrit/splitPane/splitPane.less @@ -1,72 +1,68 @@ -.splitPane{ +.splitPane { position : relative; display : flex; + flex-direction : row; height : 100%; outline : none; - flex-direction : row; - .pane{ + .pane { + flex : 1; overflow-x : hidden; overflow-y : hidden; - flex : 1; } - .divider{ - position:relative; - touch-action : none; + .divider { + position : relative; display : table; - height : 100%; width : 15px; - cursor : ew-resize; - background-color : #bbb; + height : 100%; text-align : center; - .dots{ + touch-action : none; + cursor : ew-resize; + background-color : #BBBBBB; + .dots { display : table-cell; - vertical-align : middle; text-align : center; - i{ + vertical-align : middle; + i { display : block !important; margin : 10px 0px; font-size : 6px; - color : #666; + color : #666666; } } - &:hover{ - background-color: #999; - } + &:hover { background-color : #999999; } } - .arrow{ + .arrow { position : absolute; - left:50%; - translate:-50%; + left : 50%; + z-index : 999; width : 25px; height : 25px; - border : 2px solid #bbb; - border-radius : 15px; - text-align : center; font-size : 1.2em; + text-align : center; cursor : pointer; - background-color : #ddd; - z-index : 999; - box-shadow : 0 4px 5px #0000007f; - &.left{ + background-color : #DDDDDD; + border : 2px solid #BBBBBB; + border-radius : 15px; + box-shadow : 0 4px 5px #0000007F; + translate : -50%; + &.left { .tooltipLeft('Jump to location in Editor'); top : 30px; } - &.right{ + &.right { .tooltipRight('Jump to location in Preview'); top : 60px; } - &.lock{ + &.lock { .tooltipRight('De-sync Editor and Preview locations.'); - top : 90px; - background: #666; + top : 90px; + background : #666666; } - &.unlock{ + &.unlock { .tooltipRight('Sync Editor and Preview locations'); top : 90px; } - &:hover{ - background-color: #666; - } + &:hover { background-color : #666666; } } } From 43441f318574c15b8c85da11048ade99f7eccc25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 26 Oct 2024 22:54:16 +0200 Subject: [PATCH 3/7] last changes as suggested --- shared/naturalcrit/splitPane/splitPane.jsx | 61 ++++++++++------------ 1 file changed, 28 insertions(+), 33 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 70dd98e43..6d7d0642f 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -1,11 +1,11 @@ require('./splitPane.less'); const React = require('react'); -const { useState, useEffect, useRef } = React; -const cx = require('classnames'); +const { useState, useEffect } = React; + +const storageKey = 'naturalcrit-pane-split'; const SplitPane = (props)=>{ const { - storageKey = 'naturalcrit-pane-split', onDragFinish = ()=>{}, showDividerButtons = true } = props; @@ -17,26 +17,25 @@ const SplitPane = (props)=>{ const [showMoveArrows, setShowMoveArrows] = useState(true); const [liveScroll, setLiveScroll] = useState(false); - const dividerRef = useRef(null); - // Set initial divider position and liveScroll only after mounting useEffect(()=>{ const savedPos = window.localStorage.getItem(storageKey); setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2); setLiveScroll(window.localStorage.getItem('liveScroll') === 'true'); - const handleResize = ()=>{ - setDividerPos((pos)=>limitPosition(pos,0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) - ); - }; window.addEventListener('resize', handleResize); return ()=>window.removeEventListener('resize', handleResize); - }, [storageKey]); + }, []); const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{ return Math.round(Math.min(max, Math.max(min, x))); }; + const handleResize = ()=>{ + setDividerPos((pos)=>limitPosition(pos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) + ); + }; + const handleUp =(e)=>{ e.preventDefault(); if(isDragging) { @@ -63,30 +62,26 @@ const SplitPane = (props)=>{ setLiveScroll(!liveScroll); }; - const moveArrows = showMoveArrows && ( + const renderMoveArrows = (showMoveArrows && <> - {['left', 'right'].map((direction, index) => ( -
setMoveSource(!moveSource) : () => setMoveBrew(!moveBrew)} - > - -
- ))} -
- +
setMoveSource(!moveSource)} > + +
+
setMoveBrew(!moveBrew)} > + +
+
+
); - const renderDivider = ()=>( -
- {showDividerButtons && moveArrows} + const renderDivider = ( +
+ {showDividerButtons && renderMoveArrows}
@@ -100,19 +95,19 @@ const SplitPane = (props)=>{ {props.children[0]} - {renderDivider()} + {renderDivider} {props.children[1]}
); }; -const Pane = ({ width, children, isDragging, className, moveBrew, moveSource, liveScroll, setMoveArrows })=>{ +const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, setMoveArrows })=>{ const styles = width ? { flex: 'none', width: `${width}px` } - : { pointerEvents: isDragging ? 'none' : 'auto' }; + : { pointerEvents: isDragging ? 'none' : 'auto' }; //Disable mouse capture in the right pane; else dragging into the iframe drops the divider return ( -
+
{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
); From 46eac41021fb7d4d277e406cf38a2523f8ab0fa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 26 Oct 2024 23:03:25 +0200 Subject: [PATCH 4/7] further formatting --- shared/naturalcrit/splitPane/splitPane.jsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 6d7d0642f..95269aebc 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -27,14 +27,9 @@ const SplitPane = (props)=>{ return ()=>window.removeEventListener('resize', handleResize); }, []); - const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{ - return Math.round(Math.min(max, Math.max(min, x))); - }; + const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x))); - const handleResize = ()=>{ - setDividerPos((pos)=>limitPosition(pos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) - ); - }; + const handleResize = ()=>setDividerPos((pos)=>limitPosition(pos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); const handleUp =(e)=>{ e.preventDefault(); From 987063422da920ecf21f0d1aaa15b4a1ce84f1fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 27 Oct 2024 10:13:59 +0100 Subject: [PATCH 5/7] use storage instead of state to correctly save position while resizing --- shared/naturalcrit/splitPane/splitPane.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 95269aebc..4def5b9fc 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -11,7 +11,7 @@ const SplitPane = (props)=>{ } = props; const [isDragging, setIsDragging] = useState(false); - const [dividerPos, setDividerPos] = useState(null); // Initial divider position is set to `null` + const [dividerPos, setDividerPos] = useState(null); const [moveSource, setMoveSource] = useState(false); const [moveBrew, setMoveBrew] = useState(false); const [showMoveArrows, setShowMoveArrows] = useState(true); @@ -20,7 +20,7 @@ const SplitPane = (props)=>{ // Set initial divider position and liveScroll only after mounting useEffect(()=>{ const savedPos = window.localStorage.getItem(storageKey); - setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2); + setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2); setLiveScroll(window.localStorage.getItem('liveScroll') === 'true'); window.addEventListener('resize', handleResize); @@ -29,8 +29,8 @@ const SplitPane = (props)=>{ const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x))); - const handleResize = ()=>setDividerPos((pos)=>limitPosition(pos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); - + const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); + const handleUp =(e)=>{ e.preventDefault(); if(isDragging) { @@ -84,7 +84,7 @@ const SplitPane = (props)=>{
); - + return (
From 391d0a0bfe8fe3b24f9eb68222a5302d0834e7eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 27 Oct 2024 10:20:49 +0100 Subject: [PATCH 6/7] remove flickering in divider --- shared/naturalcrit/splitPane/splitPane.jsx | 9 ++++----- shared/naturalcrit/splitPane/splitPane.less | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 4def5b9fc..1500c759f 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -17,7 +17,6 @@ const SplitPane = (props)=>{ const [showMoveArrows, setShowMoveArrows] = useState(true); const [liveScroll, setLiveScroll] = useState(false); - // Set initial divider position and liveScroll only after mounting useEffect(()=>{ const savedPos = window.localStorage.getItem(storageKey); setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2); @@ -29,6 +28,7 @@ const SplitPane = (props)=>{ const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x))); + //when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); const handleUp =(e)=>{ @@ -48,8 +48,7 @@ const SplitPane = (props)=>{ const handleMove = (e)=>{ if(!isDragging) return; e.preventDefault(); - const newSize = limitPosition(e.pageX); - setDividerPos(newSize); + setDividerPos(limitPosition(e.pageX)); }; const liveScrollToggle = ()=>{ @@ -75,7 +74,7 @@ const SplitPane = (props)=>{ ); const renderDivider = ( -
+
{showDividerButtons && renderMoveArrows}
@@ -84,7 +83,7 @@ const SplitPane = (props)=>{
); - + return (
diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less index 66e47ef23..8b61097be 100644 --- a/shared/naturalcrit/splitPane/splitPane.less +++ b/shared/naturalcrit/splitPane/splitPane.less @@ -30,7 +30,7 @@ color : #666666; } } - &:hover { background-color : #999999; } + &:hover,&.dragging { background-color : #999999; } } .arrow { position : absolute; From 5f71d2902b1c042ec3304c0440e6821c0de23e3f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 28 Oct 2024 03:23:52 +0000 Subject: [PATCH 7/7] Bump @babel/core from 7.25.9 to 7.26.0 Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.25.9 to 7.26.0. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.0/packages/babel-core) --- updated-dependencies: - dependency-name: "@babel/core" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- package-lock.json | 126 +++++++++++++--------------------------------- package.json | 2 +- 2 files changed, 35 insertions(+), 93 deletions(-) diff --git a/package-lock.json b/package-lock.json index 43f8936f8..2f8fe103b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { - "@babel/core": "^7.25.9", + "@babel/core": "^7.26.0", "@babel/plugin-transform-runtime": "^7.25.9", "@babel/preset-env": "^7.25.9", "@babel/preset-react": "^7.25.9", @@ -83,11 +83,12 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.9.tgz", - "integrity": "sha512-z88xeGxnzehn2sqZ8UdGQEvYErF1odv2CftxInpSYJt6uHuPe9YjahKZITGs3l5LeI9d2ROG+obuDAoSlqbNfQ==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.0.tgz", + "integrity": "sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==", "dependencies": { - "@babel/highlight": "^7.25.9", + "@babel/helper-validator-identifier": "^7.25.9", + "js-tokens": "^4.0.0", "picocolors": "^1.0.0" }, "engines": { @@ -103,20 +104,20 @@ } }, "node_modules/@babel/core": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.9.tgz", - "integrity": "sha512-WYvQviPw+Qyib0v92AwNIrdLISTp7RfDkM7bPqBvpbnhY4wq8HvHBZREVdYDXk98C8BkOIVnHAY3yvj7AVISxQ==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz", + "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==", "dependencies": { "@ampproject/remapping": "^2.2.0", - "@babel/code-frame": "^7.25.9", - "@babel/generator": "^7.25.9", + "@babel/code-frame": "^7.26.0", + "@babel/generator": "^7.26.0", "@babel/helper-compilation-targets": "^7.25.9", - "@babel/helper-module-transforms": "^7.25.9", - "@babel/helpers": "^7.25.9", - "@babel/parser": "^7.25.9", + "@babel/helper-module-transforms": "^7.26.0", + "@babel/helpers": "^7.26.0", + "@babel/parser": "^7.26.0", "@babel/template": "^7.25.9", "@babel/traverse": "^7.25.9", - "@babel/types": "^7.25.9", + "@babel/types": "^7.26.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -132,11 +133,12 @@ } }, "node_modules/@babel/generator": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.9.tgz", - "integrity": "sha512-omlUGkr5EaoIJrhLf9CJ0TvjBRpd9+AXRG//0GEQ9THSo8wPiTlbpy1/Ow8ZTrbXpjd9FHXfbFQx32I04ht0FA==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.0.tgz", + "integrity": "sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==", "dependencies": { - "@babel/types": "^7.25.9", + "@babel/parser": "^7.26.0", + "@babel/types": "^7.26.0", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" @@ -260,12 +262,11 @@ } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.9.tgz", - "integrity": "sha512-TvLZY/F3+GvdRYFZFyxMvnsKi+4oJdgZzU3BoGN9Uc2d9C6zfNwJcKKhjqLAhK8i46mv93jsO74fDh3ih6rpHA==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz", + "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==", "dependencies": { "@babel/helper-module-imports": "^7.25.9", - "@babel/helper-simple-access": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9", "@babel/traverse": "^7.25.9" }, @@ -389,37 +390,23 @@ } }, "node_modules/@babel/helpers": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.9.tgz", - "integrity": "sha512-oKWp3+usOJSzDZOucZUAMayhPz/xVjzymyDzUN8dk0Wd3RWMlGLXi07UCQ/CgQVb8LvXx3XBajJH4XGgkt7H7g==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz", + "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==", "dependencies": { "@babel/template": "^7.25.9", - "@babel/types": "^7.25.9" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.25.9.tgz", - "integrity": "sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw==", - "dependencies": { - "@babel/helper-validator-identifier": "^7.25.9", - "chalk": "^2.4.2", - "js-tokens": "^4.0.0", - "picocolors": "^1.0.0" + "@babel/types": "^7.26.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz", - "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==", + "version": "7.26.1", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.1.tgz", + "integrity": "sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==", "dependencies": { - "@babel/types": "^7.25.9" + "@babel/types": "^7.26.0" }, "bin": { "parser": "bin/babel-parser.js" @@ -1724,9 +1711,9 @@ } }, "node_modules/@babel/types": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz", - "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz", + "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==", "dependencies": { "@babel/helper-string-parser": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9" @@ -3359,17 +3346,6 @@ "node": ">=8" } }, - "node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -4457,19 +4433,6 @@ } ] }, - "node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -4622,19 +4585,6 @@ "node": ">=0.10.0" } }, - "node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" - }, "node_modules/colord": { "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", @@ -5691,14 +5641,6 @@ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==", "license": "MIT" }, - "node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/eslint": { "version": "9.13.0", "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz", diff --git a/package.json b/package.json index 5a3857b73..f5da9a537 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ ] }, "dependencies": { - "@babel/core": "^7.25.9", + "@babel/core": "^7.26.0", "@babel/plugin-transform-runtime": "^7.25.9", "@babel/preset-env": "^7.25.9", "@babel/preset-react": "^7.25.9",