From e0359cb4b056bf14a4976b873720223929522610 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Mon, 6 Jun 2022 12:34:30 +0200
Subject: [PATCH] Make it possible to start selections from below the dope
 sheet's rows

---
 .../DopeSheet/Right/DopeSheetSelectionView.tsx         | 10 ++++++++--
 .../SequenceEditorPanel/DopeSheet/Right/Right.tsx      |  3 ++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx
index dc772a3..2956163 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx
@@ -33,7 +33,8 @@ const Container = styled.div<{isShiftDown: boolean}>`
 
 const DopeSheetSelectionView: React.FC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
-}> = ({layoutP, children}) => {
+  height: number
+}> = ({layoutP, children, height}) => {
   const [containerRef, containerNode] = useRefAndState<HTMLDivElement | null>(
     null,
   )
@@ -43,7 +44,12 @@ const DopeSheetSelectionView: React.FC<{
   selectionBoundsRef.current = selectionBounds
 
   return (
-    <Container ref={containerRef} isShiftDown={isShiftDown}>
+    <Container
+      style={{height: height + 'px'}}
+      ref={containerRef}
+      isShiftDown={isShiftDown}
+      className="selectionview"
+    >
       {selectionBounds && (
         <SelectionRectangle state={selectionBounds} layoutP={layoutP} />
       )}
diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Right.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Right.tsx
index f250588..53df5dc 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Right.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Right.tsx
@@ -40,6 +40,7 @@ const Right: React.FC<{
     const tree = val(layoutP.tree)
     const height =
       val(layoutP.tree.top) +
+      // stretch the height of the dope sheet in case the rows don't cover its whole vertical space
       Math.max(
         val(layoutP.tree.heightIncludingChildren),
         val(layoutP.dopeSheetDims.height),
@@ -48,7 +49,7 @@ const Right: React.FC<{
     return (
       <>
         <HorizontallyScrollableArea layoutP={layoutP} height={height}>
-          <DopeSheetSelectionView layoutP={layoutP}>
+          <DopeSheetSelectionView layoutP={layoutP} height={height}>
             <ListContainer style={{top: tree.top + 'px'}}>
               <SheetRow leaf={tree} layoutP={layoutP} />
             </ListContainer>