Collapse nested variations #15488
Collapse nested variations #15488
Conversation
- Remove the "head" rendered as part of the <lines> element as it doesn't accurately represent where we're branching from - Remove the "tail" that extends past the bottom variation as it's visually unnecessary. This means the height is no longer the same as the parent height, so we need a new <branch> element with variable height. Tested on Firefox & Chrome with inline & column mode in various zoom levels.
The node's "collapse" flag we now treat as a tri-state where "undefined" means to use the default collapse state.
We've added "position: relative" to the <line> elements for styling purposes, but that affects the calculation of the "offsetTop" property. We can instead calculate the offset ourselves.
ui/tree/css/_tree.scss
Outdated
| } | ||
|
|
||
| lines lines:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| lines.collapsed > * { | ||
| display: none; |
There was a problem hiding this comment.
instead of hiding them, can we avoid rendering them altogether? And maybe get some perf gains in deep trees.
| @@ -59,7 +59,8 @@ const autoScroll = throttle(200, (ctrl: AnalyseCtrl, el: HTMLElement) => { | |||
| cont.scrollTop = ctrl.path ? 99999 : 0; | |||
| return; | |||
| } | |||
| cont.scrollTop = target.offsetTop - cont.offsetHeight / 2 + target.offsetHeight; | |||
| const targetOffset = target.getBoundingClientRect().y - el.getBoundingClientRect().y; | |||
There was a problem hiding this comment.
why do we now require 2 calls to getBoundingClientRect?
There was a problem hiding this comment.
I put a note in the "Fix autoscroll offset" commit, let me copy it here:
We've added "position: relative" to the <line> elements for styling purposes, but that affects the calculation of the "offsetTop" property. We can instead calculate the offset ourselves.
|
Looking great. |
|
Thanks for the heads up. |
|
You have to test it better, though. It's buggy. |
|
Yes, that's intended. Main lines are not collapsible. And variations expand/collapse as a group, which is certainly debatable but it keeps things simple. |
|
This is great! |
Deeply nested variations (in studies etc.) can cause visual clutter that make it difficult to navigate through complex trees.
This PR includes some baseline visual changes to the left-side "branch" to improve clarity (before, after):
On initial load deep variations are now collapsed (depth 3, 5, 7, etc. are collapsed by default). Clicking the + or navigating to the parent move will expand the variations out.
You can also expand or collapse variations from the context menu:
When you do this from the context menu it will operate recursively. So for example if you right-click the first move of the game, it effectively acts as "collapse all" or "expand all". Or you can right-click on a specific variation to just collapse that variation and its siblings.