From ab8361d24aee53541436931b513ebf9fa8150813 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Tue, 10 May 2022 15:26:28 +0200 Subject: [PATCH] Document VerticalScrollContainer --- .../VerticalScrollContainer.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx index d02e638..ff3db57 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx @@ -20,19 +20,29 @@ const Container = styled.div` scrollbar-width: none; ` -type ReceiveVerticalWheelEventFn = (ev: WheelEvent) => void +type ReceiveVerticalWheelEventFn = (ev: Pick) => void const ctx = createContext(voidFn) + +/** + * See {@link VerticalScrollContainer} and references for how to use this. + */ export const useReceiveVerticalWheelEvent = (): ReceiveVerticalWheelEventFn => useContext(ctx) +/** + * This is used in the sequence editor where we block wheel events to handle + * pan/zoom on the time axis. The issue this solves, is that when blocking those + * wheel events, we prevent the vertical scroll events from being fired. This container + * comes with a context and a hook (see {@link useReceiveVerticalWheelEvent}) that allows + * the code that traps the wheel events to pass them to the vertical scroller root, which + * we then use to manually dispatch scroll events. + */ const VerticalScrollContainer: React.FC<{}> = (props) => { const ref = useRef(null) const receiveVerticalWheelEvent = useCallback( - (event: WheelEvent) => { - // const ev = new WheelEvent('wheel', {deltaY: event.deltaY}) - // ref.current!.scrollBy(0, event.deltaY) - // ref.current!.dispatchEvent(ev) + (event) => { + ref.current!.scrollBy(0, event.deltaY) }, [], )