1 files changed, 34 insertions, 7 deletions
diff --git a/animism-align/frontend/app/views/align/containers/timeline.container.js b/animism-align/frontend/app/views/align/containers/timeline.container.js
index 3db658c..0cf49f8 100644
--- a/animism-align/frontend/app/views/align/containers/timeline.container.js
+++ b/animism-align/frontend/app/views/align/containers/timeline.container.js
@@ -9,19 +9,25 @@ import Waveform from 'app/views/align/components/timeline/waveform.component'
 import Ticks from 'app/views/align/components/timeline/ticks.component'
 import Cursor from 'app/views/align/components/timeline/cursor.component'
 import PlayCursor from 'app/views/align/components/timeline/playCursor.component'
+import CursorRegion from 'app/views/align/components/timeline/cursorRegion.component'
 
 import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
 import { clamp } from 'app/utils'
 import { positionToTime } from 'app/utils/align.utils'
 
 class Timeline extends Component {
+  state = {
+    dragging: false,
+    a_ts: -1,
+  }
   constructor(props){
     super(props)
     this.handleKeydown = this.handleKeydown.bind(this)
     this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleWheel = this.handleWheel.bind(this)
     this.handleContainerClick = this.handleContainerClick.bind(this)
-    this.handleTimelineClick = this.handleTimelineClick.bind(this)
+    this.handleTimelineMouseDown = this.handleTimelineMouseDown.bind(this)
+    this.handleTimelineMouseUp = this.handleTimelineMouseUp.bind(this)
   }
   componentDidMount() {
     this.bind()
@@ -117,15 +123,32 @@ class Timeline extends Component {
       actions.align.setScrollPosition(start_ts)
     }
   }
-  handleMouseMove(e) {
-    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
-    actions.align.setCursor(cursor_ts)
-  }
   handleContainerClick(e) {
     actions.align.clearSelectedAnnotation()
     actions.align.clearSelectedParagraph()
   }
-  handleTimelineClick(e) {
+  handleTimelineMouseDown(e) {
+    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
+    actions.align.clearCursorRegion()
+    actions.align.setCursor(cursor_ts)
+    this.setState({
+      dragging: true,
+      a_ts: cursor_ts,
+    })
+  }
+  handleMouseMove(e) {
+    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
+    if (this.state.dragging) {
+      actions.align.setCursorRegion(
+        Math.min(this.state.a_ts, cursor_ts),
+        Math.max(this.state.a_ts, cursor_ts),
+      )
+    } else {
+      actions.align.setCursor(cursor_ts)
+    }
+  }
+  handleTimelineMouseUp(e) {
+    this.setState({ dragging: false })
     const play_ts = positionToTime(e.pageY, this.props.timeline)
     if (e.metaKey) {
       actions.align.spliceTime(play_ts)
@@ -144,9 +167,13 @@ class Timeline extends Component {
         onMouseMove={this.handleMouseMove}
       >
         <div className='timelineColumn'>
-          <Waveform onClick={this.handleTimelineClick} />
+          <Waveform
+            onMouseDown={this.handleTimelineMouseDown}
+            onMouseUp={this.handleTimelineMouseUp}
+          />
           <Ticks timeline={this.props.timeline} />
           <Cursor timeline={this.props.timeline} annotation={this.props.annotation} />
+          <CursorRegion timeline={this.props.timeline} />
         </div>
         <Annotations timeline={this.props.timeline} />
         <PlayCursor />