diff --git a/src/js/App.js b/src/js/App.js index b51fea12..5e313462 100755 --- a/src/js/App.js +++ b/src/js/App.js @@ -142,7 +142,7 @@ class App extends React.Component{ case 27: // esc if (this.props.dragger && this.props.dragger.dragging){ - this.props.uiActions.dragCancel() + this.props.uiActions.dragEnd() } if (this.props.modal){ this.props.uiActions.closeModal() diff --git a/src/js/components/Track.js b/src/js/components/Track.js index 0c967c0f..c8d2d44f 100755 --- a/src/js/components/Track.js +++ b/src/js/components/Track.js @@ -20,9 +20,17 @@ export default class Track extends React.Component{ } handleMouseDown(e){ - this.start_position = { - x: e.pageX, - y: e.pageY + + // Only listen for left mouse clicks + if (e.button === 0){ + this.start_position = { + x: e.pageX, + y: e.pageY + } + + // Not left click, then ensure no dragging + } else { + this.start_position = false } } @@ -50,31 +58,40 @@ export default class Track extends React.Component{ handleMouseUp(e){ - // Make sure it's not a right-click - if (e.button === 2){ + // Only listen for left clicks + if (e.button === 0){ + if (this.props.dragger){ + e.preventDefault() + + if (this.props.handleDrop !== undefined){ + this.props.handleDrop(e) + } + } else { + var target = $(e.target); + if (!target.is('a') && target.closest('a').length <= 0){ + this.props.handleSelection(e) + this.start_position = false + } + } + + // Not left click, then ensure no dragging + } else { this.start_position = false return false } - - if (this.props.dragger){ - e.preventDefault() - - if (this.props.handleDrop !== undefined){ - this.props.handleDrop(e) - } - } else { - var target = $(e.target); - if (!target.is('a') && target.closest('a').length <= 0){ - this.props.handleSelection(e) - this.start_position = false - } - } } handleTouchStart(e){ this.props.handleTouchDrag(e) } + handleContextMenu(e){ + e.preventDefault() + e.stopPropagation() + e.cancelBubble = true + this.props.handleContextMenu(e) + } + render(){ if( !this.props.track ) return null @@ -239,7 +256,7 @@ export default class Track extends React.Component{ onMouseMove={e => this.handleMouseMove(e)} // Any movement over me onMouseUp={e => this.handleMouseUp(e)} // End of click, or potentially a dragging drop event onDoubleClick={e => this.props.handleDoubleClick(e)} - onContextMenu={e => {e.preventDefault(); this.props.handleContextMenu(e)}}> + onContextMenu={e => {this.handleContextMenu(e)}}> { track_columns } )