Blink cursors, start on cursor movement and editing

Co-authored-by: Nathan Sobo <[email protected]>
Co-authored-by: Antonio Scandurra <[email protected]>

Author: 3 people

xray_core/src/buffer_view.rs

@@ -39,6 +39,11 @@ struct SelectionProps {
 enum BufferViewAction {
     UpdateScrollTop{delta: f64},
     SetDimensions{width: u64, height: u64},
+    ReplaceSelectedText{text: String},
+    MoveUp,
+    MoveDown,
+    MoveLeft,
+    MoveRight,
 }
 
 impl BufferView {
@@ -91,6 +96,20 @@ impl BufferView {
         self
     }
 
+    pub fn replace_selected_text(&mut self, text: &str) {
+        {
+            let mut buffer = self.buffer.borrow_mut();
+            for selection in self.selections.iter().rev() {
+                let start = buffer.offset_for_anchor(&selection.start).unwrap();
+                let end = buffer.offset_for_anchor(&selection.end).unwrap();
+                buffer.splice(start..end, text);
+            }
+        }
+
+        self.merge_selections();
+        self.updated();
+    }
+
     pub fn add_selection(&mut self, start: Point, end: Point) {
         debug_assert!(start <= end); // TODO: Reverse selection if end < start
 
@@ -489,6 +508,11 @@ impl View for BufferView {
                 self.set_width(width as f64);
                 self.set_height(height as f64);
             },
+            Ok(BufferViewAction::ReplaceSelectedText{text}) => self.replace_selected_text(text.as_str()),
+            Ok(BufferViewAction::MoveUp) => self.move_up(),
+            Ok(BufferViewAction::MoveDown) => self.move_down(),
+            Ok(BufferViewAction::MoveLeft) => self.move_left(),
+            Ok(BufferViewAction::MoveRight) => self.move_right(),
             action @ _ => eprintln!("Unrecognized action {:?}", action),
         }
     }
@@ -866,6 +890,24 @@ mod tests {
         );
     }
 
+    #[test]
+    fn test_replace_selected_text() {
+        let mut editor = BufferView::new(Rc::new(RefCell::new(Buffer::new(1))));
+
+        editor.buffer.borrow_mut().splice(0..0, "abcdefgh\nhijklmno");
+
+        // Three selections on the same line
+        editor.select_right();
+        editor.select_right();
+        editor.add_selection(Point::new(0, 3), Point::new(0, 5));
+        editor.add_selection(Point::new(0, 7), Point::new(1, 1));
+        editor.replace_selected_text("-");
+        assert_eq!(
+            String::from_utf16_lossy(editor.buffer.borrow().to_u16_chars().as_slice()),
+            "-c-fg-ijklmno"
+        );
+    }
+
     #[test]
     fn test_render() {
         let buffer = Rc::new(RefCell::new(Buffer::new(1)));

xray_electron/lib/render_process/debounce.js

@@ -0,0 +1,19 @@
+module.exports =
+function debounce (fn, wait) {
+  let timestamp, timeout
+
+  function later () {
+    const last = Date.now() - timestamp
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      fn()
+    }
+  }
+
+  return function () {
+    timestamp = Date.now()
+    if (!timeout) timeout = setTimeout(later, wait)
+  }
+}

xray_electron/lib/render_process/text_editor/text_editor.js

@@ -3,8 +3,12 @@ const ReactDOM = require("react-dom");
 const PropTypes = require("prop-types");
 const { styled } = require("styletron-react");
 const TextPlane = require("./text_plane");
+const debounce = require('../debounce');
 const $ = React.createElement;
 
+const CURSOR_BLINK_RESUME_DELAY = 300;
+const CURSOR_BLINK_PERIOD = 800;
+
 const Root = styled("div", {
   width: "100%",
   height: "100%",
@@ -14,7 +18,12 @@ const Root = styled("div", {
 class TextEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.onWheel = this.onWheel.bind(this);
+    this.handleMouseWheel = this.handleMouseWheel.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.debouncedStartCursorBlinking = debounce(
+      this.startCursorBlinking.bind(this),
+      CURSOR_BLINK_RESUME_DELAY
+    );
 
     if (props.initialText) {
       buffer.splice(0, 0, props.initialText);
@@ -39,18 +48,16 @@ class TextEditor extends React.Component {
       height: element.offsetHeight
     });
 
-    element.addEventListener('wheel', this.onWheel, {passive: true});
+    element.addEventListener('wheel', this.handleMouseWheel, {passive: true});
 
-    this.state.cursorBlinkIntervalHandle = window.setInterval(() => {
-      this.setState({ showCursors: !this.state.showCursors });
-    }, 500);
+    this.startCursorBlinking();
   }
 
   componentWillUnmount() {
+    this.stopCursorBlinking();
     const element = ReactDOM.findDOMNode(this);
-    element.removeEventListener('wheel', this.onWheel, {passive: true});
+    element.removeEventListener('wheel', this.handleMouseWheel, {passive: true});
     this.state.resizeObserver.disconnect();
-    window.clearInterval(this.state.cursorBlinkIntervalHandle);
   }
 
   componentDidResize(measurements) {
@@ -64,7 +71,10 @@ class TextEditor extends React.Component {
   render() {
     return $(
       Root,
-      {},
+      {
+        tabIndex: -1,
+        onKeyDown: this.handleKeyDown
+      },
       $(TextPlane, {
         showCursors: this.state.showCursors,
         lineHeight: this.props.line_height,
@@ -78,9 +88,64 @@ class TextEditor extends React.Component {
     );
   }
 
-  onWheel (event) {
+  handleMouseWheel(event) {
     this.props.dispatch({type: 'UpdateScrollTop', delta: event.deltaY});
   }
+
+  handleKeyDown(event) {
+    if (event.key.length === 1) {
+      this.props.dispatch({type: 'ReplaceSelectedText', text: event.key});
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowUp':
+        this.pauseCursorBlinking();
+        this.props.dispatch({type: 'MoveUp'});
+        break;
+      case 'ArrowDown':
+        this.pauseCursorBlinking();
+        this.props.dispatch({type: 'MoveDown'});
+        break;
+      case 'ArrowLeft':
+        this.pauseCursorBlinking();
+        this.props.dispatch({type: 'MoveLeft'});
+        break;
+      case 'ArrowRight':
+        this.pauseCursorBlinking();
+        this.props.dispatch({type: 'MoveRight'});
+        break;
+    }
+  }
+
+  pauseCursorBlinking () {
+    this.stopCursorBlinking()
+    this.debouncedStartCursorBlinking()
+  }
+
+  stopCursorBlinking () {
+    if (this.state.cursorsBlinking) {
+      window.clearInterval(this.cursorBlinkIntervalHandle)
+      this.cursorBlinkIntervalHandle = null
+      this.setState({
+        showCursors: true,
+        cursorsBlinking: false
+      });
+    }
+  }
+
+  startCursorBlinking () {
+    if (!this.state.cursorsBlinking) {
+      this.cursorBlinkIntervalHandle = window.setInterval(() => {
+        this.setState({ showCursors: !this.state.showCursors });
+      }, CURSOR_BLINK_PERIOD / 2);
+
+      this.setState({
+        cursorsBlinking: true,
+        showCursors: false
+      });
+    }
+  }
 }
 
 TextEditor.contextTypes = {