feat(spans): Allow horizontal scrolling on left pane of span view #34006
Conversation
| clearTimeout(this.wheelTimeout); | ||
| } | ||
|
|
||
| this.wheelTimeout = setTimeout(() => (this.isWheeling = false), 200); |
There was a problem hiding this comment.
I unfortunately do not think there is any other way to do this aside from using setTimeout, since there is no onWheelEnd event or anything of the sort
There was a problem hiding this comment.
@0Calories you'll also need to do this.wheelTimeout = null within the timeout callback.
|
Just realized I forgot something: I need to add the event listener to |
| this.wheelTimeout = null; | ||
| }, 200); | ||
|
|
||
| const interactiveLayerRefDOM = this.props.interactiveLayerRef.current!; |
There was a problem hiding this comment.
I think it's safe to assume it's not null/undefined here, since the wheel event shouldn't be able to occur otherwise
| // Update scroll position of the virtual scroll bar | ||
| selectRefs(this.scrollBarArea, (scrollBarAreaDOM: HTMLDivElement) => { | ||
| selectRefs(this.virtualScrollbar, (virtualScrollbarDOM: HTMLDivElement) => { | ||
| const scrollBarAreaRect = scrollBarAreaDOM.getBoundingClientRect(); | ||
| const virtualScrollbarPosition = scrollLeft / scrollBarAreaRect.width; | ||
|
|
||
| const virtualScrollBarRect = rectOfContent(virtualScrollbarDOM); | ||
| const maxVirtualScrollableArea = | ||
| 1 - virtualScrollBarRect.width / interactiveLayerRect.width; | ||
|
|
||
| const virtualLeft = | ||
| clamp(virtualScrollbarPosition, 0, maxVirtualScrollableArea) * | ||
| interactiveLayerRect.width; | ||
|
|
||
| virtualScrollbarDOM.style.transform = `translate3d(${virtualLeft}px, 0, 0)`; | ||
| virtualScrollbarDOM.style.transformOrigin = 'left'; | ||
| }); | ||
| }); | ||
|
|
||
| // Update scroll positions of all the span bars | ||
| selectRefs(this.contentSpanBar, (spanBarDOM: HTMLDivElement) => { | ||
| const left = -scrollLeft; | ||
|
|
||
| spanBarDOM.style.transform = `translate3d(${left}px, 0, 0)`; | ||
| spanBarDOM.style.transformOrigin = 'left'; | ||
| }); | ||
| }; |
There was a problem hiding this comment.
There is likely a ref-less solution to this or at least less transform changes, but we can try this out for now and measure perf on production to decide whether / how to fix it.
Co-authored-by: Kev <6111995+k-fish@users.noreply.github.com>
We make use of the Wheel event to let users use the trackpad to horizontally scroll the span view on the left pane (span tree):
Kapture.2022-04-27.at.10.56.25.mp4
This should be substantially simpler than a previous implementation of this in #22504
Caveats:
event.preventDefault()does not work as you might expect in React. A workaround is used. See: Chrome 73 breaks wheel events facebook/react#14856