From 9c993a26467ede4c3e2f87b304d0e4d948ade264 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 24 Dec 2017 21:56:17 -0800
Subject: [PATCH] Add track moving to the list level

This way we can start to respond to the difference between being in the list and outside.
---
 js/components/PlaylistWindow/TrackCell.js | 19 +---------
 js/components/PlaylistWindow/TrackList.js | 43 +++++++++++++++++++++--
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/js/components/PlaylistWindow/TrackCell.js b/js/components/PlaylistWindow/TrackCell.js
index 9ea09da3..a3bc7279 100644
--- a/js/components/PlaylistWindow/TrackCell.js
+++ b/js/components/PlaylistWindow/TrackCell.js
@@ -1,14 +1,12 @@
 import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
-import { TRACK_HEIGHT } from "../../constants";
 import {
   CLICKED_TRACK,
   CTRL_CLICKED_TRACK,
   SHIFT_CLICKED_TRACK,
   PLAY_TRACK
 } from "../../actionTypes";
-import { dragSelected } from "../../actionCreators";
 import { getCurrentTrackId } from "../../selectors";
 
 class TrackCell extends React.Component {
@@ -30,21 +28,7 @@ class TrackCell extends React.Component {
       this.props.click(e);
     }
 
-    const mouseStart = e.clientY;
-    let lastDiff = 0;
-    const handleMouseMove = ee => {
-      const proposedDiff = Math.floor((ee.clientY - mouseStart) / TRACK_HEIGHT);
-      if (proposedDiff !== lastDiff) {
-        const diffDiff = proposedDiff - lastDiff;
-        this.props.dragSelected(diffDiff);
-        lastDiff = proposedDiff;
-      }
-    };
-
-    window.addEventListener("mouseup", () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-    });
-    window.addEventListener("mousemove", handleMouseMove);
+    this.props.handleMoveClick(e);
   }
 
   render() {
@@ -91,7 +75,6 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     return dispatch({ type: CTRL_CLICKED_TRACK, index: ownProps.index });
   },
   click: () => dispatch({ type: CLICKED_TRACK, index: ownProps.index }),
-  dragSelected: offset => dispatch(dragSelected(offset)),
   onDoubleClick: () => dispatch({ type: PLAY_TRACK, id: ownProps.id })
 });
 
diff --git a/js/components/PlaylistWindow/TrackList.js b/js/components/PlaylistWindow/TrackList.js
index 921bbd38..15e06ab1 100644
--- a/js/components/PlaylistWindow/TrackList.js
+++ b/js/components/PlaylistWindow/TrackList.js
@@ -3,27 +3,65 @@ import { connect } from "react-redux";
 
 import { getTimeStr } from "../../utils";
 import { getVisibleTrackIds, getScrollOffset } from "../../selectors";
+import { TRACK_HEIGHT } from "../../constants";
 import { SELECT_ZERO } from "../../actionTypes";
+import { dragSelected } from "../../actionCreators";
 import TrackCell from "./TrackCell";
 import TrackTitle from "./TrackTitle";
 
 class TrackList extends React.Component {
   constructor(props) {
     super(props);
+    this._handleMoveClick = this._handleMoveClick.bind(this);
   }
 
   _renderTracks(format) {
     return this.props.trackIds.map((id, i) => (
-      <TrackCell key={id} id={id} index={i}>
+      <TrackCell
+        key={id}
+        id={id}
+        index={i}
+        handleMoveClick={this._handleMoveClick}
+      >
         {format(id, i)}
       </TrackCell>
     ));
   }
 
+  _handleMoveClick(e) {
+    if (!this._node) {
+      return;
+    }
+    const { top, bottom, left, right } = this._node.getBoundingClientRect();
+    const mouseStart = e.clientY;
+    let lastDiff = 0;
+    const handleMouseMove = ee => {
+      const { clientY: y, clientX: x } = ee;
+      if (y < top || y > bottom || x < left || x > right) {
+        // Mouse is outside the track list
+        return;
+      }
+      const proposedDiff = Math.floor((y - mouseStart) / TRACK_HEIGHT);
+      if (proposedDiff !== lastDiff) {
+        const diffDiff = proposedDiff - lastDiff;
+        this.props.dragSelected(diffDiff);
+        lastDiff = proposedDiff;
+      }
+    };
+
+    window.addEventListener("mouseup", () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    });
+    window.addEventListener("mousemove", handleMouseMove);
+  }
+
   render() {
     const { tracks, offset } = this.props;
     return (
       <div
+        ref={node => {
+          this._node = node;
+        }}
         className="playlist-tracks"
         style={{ height: "100%" }}
         onClick={this.props.selectZero}
@@ -43,7 +81,8 @@ class TrackList extends React.Component {
 }
 
 const mapDispatchToProps = {
-  selectZero: () => ({ type: SELECT_ZERO })
+  selectZero: () => ({ type: SELECT_ZERO }),
+  dragSelected
 };
 
 const mapStateToProps = state => ({