完善搜索跳转。 #148 #213

app-ui/content/Editor.jsx

@@ -12,6 +12,7 @@ import 'codemirror/addon/comment/comment'
 import classnames from 'classnames'
 import m_kw from './kw'
 import Agent from '../Agent'
+import * as func from '../libs/search'
 import 'codemirror/lib/codemirror.css'
 import styles from './Editor.less'
 
@@ -25,28 +26,54 @@ export default class Editor extends React.Component {
 
     this.codemirror = null
 
-    this.marks = []
-    this.kw = ''
-
-    this.state = {}
+    this.state = {
+      marks: [],
+      pos: [],
+      search_kw: ''
+    }
 
-    Agent.on('search:kw', kw => {
-      this.kw = kw
-      this.highlightKeyword()
-    })
   }
 
-  highlightKeyword () {
-    while (this.marks.length > 0) {
-      this.marks.shift().clear()
+  //highlightKeyword () {
+  //  while (this.marks.length > 0) {
+  //    this.marks.shift().clear()
+  //  }
+  //
+  //  let code = this.props.code
+  //  let pos = m_kw.findPositions(this.kw, code) || []
+  //  // this.codemirror.markText({line: 6, ch: 16}, {line: 6, ch: 22}, {className: 'cm-hl'});
+  //
+  //  pos.map((p) => {
+  //    this.marks.push(this.codemirror.markText(p[0], p[1], {className: 'cm-hl'}))
+  //  })
+  //}
+
+  doSearch () {
+    let {marks, search_kw} = this.state
+    while (marks.length > 0) {
+      marks.shift().clear()
+    }
+    let pos = []
+
+    let {code} = this.props
+    if (search_kw && code) {
+      pos = m_kw.findPositions(search_kw, code)
+      pos.map(p => {
+        marks.push(this.codemirror.markText(p[0], p[1], {className: 'cm-hl'}))
+      })
     }
 
-    let code = this.props.code
-    let pos = m_kw.findPositions(this.kw, code) || []
-    // this.codemirror.markText({line: 6, ch: 16}, {line: 6, ch: 22}, {className: 'cm-hl'});
-
-    pos.map((p) => {
-      this.marks.push(this.codemirror.markText(p[0], p[1], {className: 'cm-hl'}))
+    let doc = this.codemirror.getDoc()
+    let cursor = doc.getCursor()
+
+    this.setState({marks, pos}, () => {
+      Agent.emit('search:state', {
+        count: marks.length,
+        pos: pos.slice(0),
+        has_next: !!this.getNext(),
+        has_previous: !!this.getPrevious(),
+        cursor
+      })
     })
   }
 
@@ -68,6 +95,45 @@ export default class Editor extends React.Component {
     })
   }
 
+  getNext () {
+    let doc = this.codemirror.getDoc()
+    let cursor = doc.getCursor()
+    let {pos} = this.state
+    let next_pos = func.getNextPos(pos, cursor)
+    //console.log(next_pos)
+    return next_pos
+  }
+
+  gotoNext () {
+    this.docSelect(this.getNext())
+  }
+
+  getPrevious () {
+    let doc = this.codemirror.getDoc()
+    let cursor = doc.getCursor()
+    let {pos} = this.state
+    let prev_pos = func.getPreviousPos(pos, cursor)
+    //console.log(next_pos)
+    return prev_pos
+  }
+
+  gotoPrevious () {
+    this.docSelect(this.getPrevious())
+  }
+
+  docSelect (pos) {
+    console.log(pos)
+    if (!pos || !Array.isArray(pos)) return
+    let doc = this.codemirror.getDoc()
+    doc.setCursor(pos[1])
+    doc.setSelection(pos[0], pos[1])
+
+    Agent.emit('search:state', {
+      has_next: !!this.getNext(),
+      has_previous: !!this.getPrevious()
+    })
+  }
+
   componentDidMount () {
     // console.log(this.cnt_node, this.cnt_node.value);
     this.codemirror = CodeMirror.fromTextArea(this.cnt_node, {
@@ -108,6 +174,15 @@ export default class Editor extends React.Component {
     Agent.on('to_comment', () => {
       this.toComment()
     })
+
+    Agent.on('search:goto_previous', () => this.gotoPrevious())
+    Agent.on('search:goto_next', () => this.gotoNext())
+    Agent.on('editor:select', pos => this.docSelect(pos))
+
+    Agent.on('search:kw', kw => {
+      //this.highlightKeyword()
+      this.setState({search_kw: kw}, () => this.doSearch())
+    })
   }
 
   componentWillReceiveProps (next_props) {
@@ -119,7 +194,8 @@ export default class Editor extends React.Component {
     }
     cm.setOption('readOnly', next_props.readonly)
     setTimeout(() => {
-      this.highlightKeyword()
+      //this.highlightKeyword()
+      this.doSearch()
     }, 100)
   }
 

app-ui/libs/search.js

@@ -0,0 +1,56 @@
+/**
+ * search
+ * @author oldj
+ * @blog https://oldj.net
+ */
+
+'use strict'
+
+export function getNextPos (pos, cursor) {
+  let {ch, line} = cursor
+
+  let mm = 1e10
+  let target_ch = mm
+  let target_line = mm
+  let target_pos = null
+
+  pos.map(p => {
+    let p_ch = p[0].ch
+    let p_line = p[0].line
+    if (p_line < line) return
+    if (p_line === line && p_ch < ch) return
+
+    if ((p_line < target_line) || (p_line === target_line && p_ch < target_ch)) {
+      target_line = p_line
+      target_ch = p_ch
+
+      target_pos = p
+    }
+  })
+
+  return target_pos
+}
+
+export function getPreviousPos (pos, cursor) {
+  let {ch, line} = cursor
+
+  let target_ch = 0
+  let target_line = 0
+  let target_pos = null
+
+  pos.map(p => {
+    let p_ch = p[1].ch
+    let p_line = p[1].line
+    if (p_line > line) return
+    if (p_line === line && p_ch >= ch) return
+
+    if ((p_line > target_line) || (p_line === target_line && p_ch > target_ch)) {
+      target_line = p_line
+      target_ch = p_ch
+
+      target_pos = p
+    }
+  })
+
+  return target_pos
+}

app/lang/cn.js

@@ -46,6 +46,7 @@ exports.content = {
   , is_updated_title: '已是最新'
   , language: '语言'
   , last_refresh: '上次更新：'
+  , matches: '匹配'
   , menu_about: '关于'
   , menu_bringalltofront: '所有窗口移至最前'
   , menu_close: '关闭'

app/lang/en.js

@@ -46,6 +46,7 @@ exports.content = {
   , is_updated_title: 'You are up to date!'
   , language: 'Language'
   , last_refresh: 'Last refresh: '
+  , matches: 'matches'
   , menu_about: 'About'
   , menu_bringalltofront: 'Bring All to Front'
   , menu_close: 'Close'