diff --git a/ivette/src/dome/src/renderer/frame/sidebars.tsx b/ivette/src/dome/src/renderer/frame/sidebars.tsx index 52dc2b2cd91bbb4d579259ed9318f8e31840ec25..94d66b95e639b4ae1d2ceb14e34b3676e3093b64 100644 --- a/ivette/src/dome/src/renderer/frame/sidebars.tsx +++ b/ivette/src/dome/src/renderer/frame/sidebars.tsx @@ -183,7 +183,11 @@ export interface ItemProps { export function Item(props: ItemProps) { const { selected = false, disabled = false, enabled = true } = props; const isDisabled = disabled || !enabled; - const onClick = isDisabled ? undefined : props.onSelection; + const ref = React.useRef<HTMLDivElement>(null); + const [clicked, setClicked] = React.useState(false); + const onSelection = isDisabled ? undefined : props.onSelection; + const onClick = + onSelection ? () => { setClicked(true); onSelection(); } : undefined; const onContextMenu = isDisabled ? undefined : props.onContextMenu; const className = classes( 'dome-xSideBarItem', @@ -191,8 +195,21 @@ export function Item(props: ItemProps) { isDisabled && 'dome-disabled', props.className, ); + + React.useLayoutEffect(() => { + if (!clicked && selected) { + ref?.current?.scrollIntoView({ + behavior: 'auto', + block: 'center', + }); + } + if (!selected && clicked) + setClicked(false); + }, [clicked, selected]); + return ( <div + ref={ref} className={className} style={props.style} title={props.title} diff --git a/ivette/src/dome/src/renderer/frame/style.css b/ivette/src/dome/src/renderer/frame/style.css index 5ec0dd8eba070447366ccea4defb7cf1b1577ac5..9cdc1f5d44786efe4f31587d3c8cd593fe7ae051 100644 --- a/ivette/src/dome/src/renderer/frame/style.css +++ b/ivette/src/dome/src/renderer/frame/style.css @@ -130,7 +130,7 @@ padding-left: 3px ; padding-right: 2px ; display: flex ; - flew-flow: row nowrap ; + flex-flow: row nowrap ; align-items: center ; } @@ -174,6 +174,7 @@ display: flex ; flex-flow: row nowrap ; align-items: center ; + scroll-margin-top: 30px; } .dome-window-active .dome-xSideBarItem.dome-active { diff --git a/ivette/src/renderer/Globals.tsx b/ivette/src/renderer/Globals.tsx index ffd3959366776d3a1c9ed4ff9fba1a4932985645..27d21bc47181ee8f530e98abf2c209324240992b 100644 --- a/ivette/src/renderer/Globals.tsx +++ b/ivette/src/renderer/Globals.tsx @@ -105,6 +105,9 @@ export default () => { ); } + // Currently selected function. + const current: undefined | string = selection?.current?.function; + function showFunction(fct: functionsData) { const visible = (stdlib || !fct.stdlib) @@ -112,7 +115,7 @@ export default () => { && (undef || fct.defined) && (!evaOnly || !evaComputed || (fct.eva_analyzed === true)) && (!selected || !multipleSelectionActive || isSelected(fct)); - return visible; + return visible || (current && fct.name === current); } function onSelection(name: string) { @@ -153,9 +156,6 @@ export default () => { Dome.popupMenu(items); } - // Items - const current: undefined | string = selection?.current?.function; - // Filtered const filtered = fcts.filter(showFunction);