select mouse handler work, need cleaning

Author: david califf

Diff for: packages/selenium-ide/src/neo/components/TestRow/index.jsx

@@ -109,6 +109,7 @@ class TestRow extends React.Component {
   static propTypes = {
     index: PropTypes.number,
     selected: PropTypes.bool,
+    lastSelected: PropTypes.bool,
     className: PropTypes.string,
     status: PropTypes.string,
     readOnly: PropTypes.bool,
@@ -134,17 +135,23 @@ class TestRow extends React.Component {
     setContextMenu: PropTypes.func,
     level: PropTypes.number,
     scrollToLastPos: PropTypes.func,
+    selectCommandByRange: PropTypes.func
   }
   componentDidMount() {
     if (this.props.selected) {
+      console.log('focus')
+      this.node.focus()
       this.props.scrollToLastPos()
       this.props.setSectionFocus('editor', () => {
+        console.log('set section focus')
         this.node.focus()
       })
     }
   }
   componentDidUpdate(prevProps) {
-    if (this.props.selected && !prevProps.selected) {
+    console.log('should focus', this.props.selected, !prevProps.selected,this.props.lastSelected)
+    if (this.props.selected && !prevProps.selected && this.props.lastSelected) {
+      console.log('focus')
       this.scrollToRowIfNeeded(this.node)
       this.node.focus()
       this.props.setSectionFocus('editor', () => {
@@ -186,13 +193,19 @@ class TestRow extends React.Component {
       this.props.executeCommand(this.props.command)
     } else if (this.props.moveSelection && noModifiers && e.key === 'ArrowUp') {
       e.preventDefault()
+      if(!e.shiftKey){
+        this.props.clearAllSelectedCommands();
+      }
       this.props.moveSelection(this.props.index - 1)
     } else if (
       this.props.moveSelection &&
       noModifiers &&
       e.key === 'ArrowDown'
     ) {
       e.preventDefault()
+      if(!e.shiftKey){
+        this.props.clearAllSelectedCommands();
+      }
       this.props.moveSelection(this.props.index + 1)
     } else if (!this.props.isPristine && onlyPrimary && key === 'X') {
       this.cut()
@@ -229,10 +242,38 @@ class TestRow extends React.Component {
     }
   }
   select(e) {
-    if(e&& e.shiftKey===false){
+    console.log('select event')
+    if((e.type == 'contextmenu' || e.type == 'mousedown') && this.props.selected){
+      return
+    }
+    if(e.type == 'click' && (e.shiftKey||this.props.lastSelected)){
+      if(!e.shiftKey){
+        this.props.clearAllSelectedCommands();
+        this.props.select(this.props.command)
+      }
+      return;
+    }
+    if( e && e.shiftKey===false){
       this.props.clearAllSelectedCommands();
     }
-    this.props.select(this.props.command)
+    if(this.props.isPristine){
+      this.props.clearAllSelectedCommands();
+    }
+    if(e && e.shiftKey){
+      if(this.props.isPristine){
+        this.props.clearAllSelectedCommands();
+        this.props.select(this.props.command)
+      }
+      else{
+        console.log('selectcommandbyrange')
+        this.props.selectCommandByRange(this.props.command, this.props.index)
+        this.props.select(this.props.command)
+      }
+    }
+    else{
+      console.log('select')
+      this.props.select(this.props.command)
+    }
   }
 
   remove() {
@@ -368,13 +409,14 @@ class TestRow extends React.Component {
             : null
         }
         onClick={this.select}
+        onFocus={this.select}
+        onMouseDown={this.select}
         onDoubleClick={() => {
           this.props.executeCommand && this.props.singleCommandExecutionEnabled
             ? this.props.executeCommand(this.props.command)
             : undefined
         }}
         onKeyDown={this.handleKeyDown.bind(this)}
-        onFocus={this.select}
         style={{
           opacity: this.props.isDragging ? '0' : '1',
         }}

Diff for: packages/selenium-ide/src/neo/components/TestTable/index.jsx

@@ -42,6 +42,7 @@ export default class TestTable extends React.Component {
     )
     this.commandLevels = []
     this.node = null
+    this.selectCommandByRange = this.selectCommandByRange.bind(this);
   }
   static propTypes = {
     commands: MobxPropTypes.arrayOrObservableArray,
@@ -79,6 +80,19 @@ export default class TestTable extends React.Component {
       }
     }
   }
+  selectCommandByRange(lastCommandSelected,index){
+    if(this.props.selectedCommands.length > 0){
+      let fromIndex = this.props.commands.indexOf(this.props.selectedCommands[0])
+      fromIndex = fromIndex == -1 ? index : fromIndex 
+      const toIndex = index
+      const from = fromIndex > toIndex ? toIndex : fromIndex;
+      const to = fromIndex > toIndex ? fromIndex : toIndex;
+      for(let i = from; i <= to; i++){
+        console.log('adding')
+        UiState.addToSelectedCommands(this.props.commands[i]);
+      }
+    }
+  }
   handleScroll() {
     UiState.selectedTest.test.scrollY = this.node.scrollTop
   }
@@ -133,6 +147,7 @@ export default class TestTable extends React.Component {
                           : ''
                       )}
                       selected= {this.props.selectedCommand === command.id || !!this.props.selectedCommands.find((cmd) => (cmd.id === command.id))}
+                      lastSelected = { this.props.selectedCommand === command.id }
                       readOnly={PlaybackState.isPlaying}
                       singleCommandExecutionEnabled={
                         PlaybackState.isSingleCommandExecutionEnabled
@@ -147,6 +162,7 @@ export default class TestTable extends React.Component {
                       scrollToLastPos={this.scrollToLastPos}
                       isPristine={false}
                       select={this.props.selectCommand}
+                      selectCommandByRange = {this.selectCommandByRange}
                       startPlayingHere={PlaybackState.startPlaying}
                       executeCommand={PlaybackState.playCommand}
                       moveSelection={UiState.selectCommandByIndex}
@@ -177,6 +193,7 @@ export default class TestTable extends React.Component {
                       moveSelection={UiState.selectCommandByIndex}
                       pasteFromClipboard={UiState.pasteFromClipboard}
                       setSectionFocus={UiState.setSectionFocus}
+                      clearAllSelectedCommands = {this.props.clearAllSelectedCommands}
                     />
                   )
               : null}

Diff for: packages/selenium-ide/src/neo/stores/view/UiState.js

@@ -202,11 +202,13 @@ class UiState {
         _test &&
         (_test !== this.displayedTest || suite !== this.selectedTest.suite)
       ) {
+        this.selectedCommands.clear()
         this.selectedTest = {
           test,
           suite,
           stack: stack >= 0 ? stack : undefined,
         }
+        this.selectedCommands = this.selectedTest.test.selectedCommands;
         if (PlaybackState.isPlaying && !PlaybackState.paused) {
           this.selectCommand(undefined)
         } else if (_test && _test.commands.length) {
@@ -294,11 +296,11 @@ class UiState {
       PlaybackState.paused ||
       opts.isCommandTarget
     ) {
+      console.log('in selectCommand')
       if (this.selectedTest.test) {
         this.selectedTest.test.selectedCommand = command
-        this.selectedTest.test.selectedCommands.push(command)
-        this.selectedCommands.push(command);
         this.selectedCommand = command
+        this.addToSelectedCommands(command)
       } else {
         this.selectedCommand = undefined
       }
@@ -311,6 +313,7 @@ class UiState {
     if (index >= 0 && index < test.commands.length) {
       this.selectCommand(test.commands[index], opts)
     } else if (index === test.commands.length) {
+      this.clearAllSelectedCommands()
       this.selectCommand(this.pristineCommand, opts)
     }
   }
@@ -328,16 +331,24 @@ class UiState {
       }
   }
 
-  @action.bound addToSelectedCommands(command, index){
+  @action.bound 
+  addToSelectedCommands(command, index){
+    console.log('addToSelectedCommands');
     if (!PlaybackState.isPlaying || PlaybackState.paused) {
       if(command){
-        command.index = index ? index : 0;
-        if (!this.selectedCommands.find((c) => (c === command)))
-          this.selectedCommands.push(command);
+        //command.index = index ? index : 0;
+        if(this.selectTest && this.selectedTest.test.commands.find((c) => (c === command))){
+          if (this.selectedCommands.findIndex((c) => (c.id === command.id))=== -1){
+            this.selectedCommands.push(command);
+          }
+          else{
+            console.log('rejected')
+          }
+        }
       }
     }
+    console.log(this.selectedCommands.length)
   }
-
   @action.bound
   selectNextCommand(opts = { from: undefined, isCommandTarget: false }) {
     this.selectCommandByIndex(this.nextCommandIndex(opts.from), opts)