Merge pull request #74 from Hufe921/feature/search-navigate

feat:add search navigate result

index.html

@@ -194,6 +194,7 @@
         <div class="menu-item__search__collapse" data-menu="search">
           <div class="menu-item__search__collapse__search">
             <input type="text" />
+            <label class="search-result"></label>
             <div class="arrow-left">
               <i></i>
             </div>

src/editor/core/command/Command.ts

@@ -1,4 +1,4 @@
-import { IElement, ImageDisplay } from '../..'
+import { IElement, ImageDisplay, INavigateInfo } from '../..'
 import { EditorMode, PageMode } from '../../dataset/enum/Editor'
 import { RowFlex } from '../../dataset/enum/Row'
 import { IDrawImagePayload, IPainterOptions } from '../../interface/Draw'
@@ -58,6 +58,7 @@ export class Command {
   private static search: CommandAdapt['search']
   private static searchNavigatePre: CommandAdapt['searchNavigatePre']
   private static searchNavigateNext: CommandAdapt['searchNavigateNext']
+  private static getSearchNavigateInfo: CommandAdapt['getSearchNavigateInfo']
   private static replace: CommandAdapt['replace']
   private static print: CommandAdapt['print']
   private static replaceImageElement: CommandAdapt['replaceImageElement']
@@ -126,6 +127,7 @@ export class Command {
     Command.search = adapt.search.bind(adapt)
     Command.searchNavigatePre = adapt.searchNavigatePre.bind(adapt)
     Command.searchNavigateNext = adapt.searchNavigateNext.bind(adapt)
+    Command.getSearchNavigateInfo = adapt.getSearchNavigateInfo.bind(adapt)
     Command.replace = adapt.replace.bind(adapt)
     Command.print = adapt.print.bind(adapt)
     Command.replaceImageElement = adapt.replaceImageElement.bind(adapt)
@@ -345,6 +347,10 @@ export class Command {
     return Command.searchNavigateNext()
   }
 
+  public getSearchNavigateInfo(): null | INavigateInfo {
+    return Command.getSearchNavigateInfo()
+  }
+
   public executeReplace(payload: string) {
     return Command.replace(payload)
   }

src/editor/core/command/CommandAdapt.ts

@@ -19,7 +19,7 @@ import { formatElementList } from '../../utils/element'
 import { printImageBase64 } from '../../utils/print'
 import { Control } from '../draw/control/Control'
 import { Draw } from '../draw/Draw'
-import { Search } from '../draw/interactive/Search'
+import { INavigateInfo, Search } from '../draw/interactive/Search'
 import { TableTool } from '../draw/particle/table/TableTool'
 import { CanvasEvent } from '../event/CanvasEvent'
 import { HistoryManager } from '../history/HistoryManager'
@@ -1239,6 +1239,10 @@ export class CommandAdapt {
     })
   }
 
+  public getSearchNavigateInfo(): null | INavigateInfo {
+    return this.searchManager.getSearchNavigateInfo()
+  }
+
   public replace(payload: string) {
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return

src/editor/core/draw/interactive/Search.ts

@@ -10,6 +10,11 @@ import { getUUID } from '../../../utils'
 import { Position } from '../../position/Position'
 import { Draw } from '../Draw'
 
+export interface INavigateInfo {
+  index: number;
+  count: number;
+}
+
 export class Search {
 
   private draw: Draw
@@ -120,6 +125,25 @@ export class Search {
     return this.searchMatchList
   }
 
+  public getSearchNavigateInfo(): null | INavigateInfo {
+    if (!this.searchKeyword || !this.searchMatchList.length) return null
+    const index = this.searchNavigateIndex !== null
+      ? (this.searchNavigateIndex / this.searchKeyword.length) + 1
+      : 0
+    let count = 0
+    let groupId = null
+    for (let s = 0; s < this.searchMatchList.length; s++) {
+      const match = this.searchMatchList[s]
+      if (groupId === match.groupId) continue
+      groupId = match.groupId
+      count += 1
+    }
+    return {
+      index,
+      count
+    }
+  }
+
   public compute(payload: string) {
     const searchMatchList: ISearchResult[] = []
     // 分组

src/editor/index.ts

@@ -23,6 +23,7 @@ import { IControlOption } from './interface/Control'
 import { ICheckboxOption } from './interface/Checkbox'
 import { defaultCheckboxOption } from './dataset/constant/Checkbox'
 import { DeepRequired } from './interface/Common'
+import { INavigateInfo } from './core/draw/interactive/Search'
 
 export default class Editor {
 
@@ -128,5 +129,6 @@ export type {
   IEditorResult,
   IContextMenuContext,
   IRegisterContextMenu,
-  IWatermark
+  IWatermark,
+  INavigateInfo
 }

src/main.ts

@@ -611,6 +611,16 @@ window.onload = function () {
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!
   const replaceInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__replace input')!
   const searchDom = document.querySelector<HTMLDivElement>('.menu-item__search')!
+  const searchResultDom = searchCollapseDom.querySelector<HTMLLabelElement>('.search-result')!
+  function setSearchResult() {
+    const result = instance.command.getSearchNavigateInfo()
+    if (result) {
+      const { index, count } = result
+      searchResultDom.innerText = `${index}/${count}`
+    } else {
+      searchResultDom.innerText = ''
+    }
+  }
   searchDom.onclick = function () {
     console.log('search')
     searchCollapseDom.style.display = 'block'
@@ -629,13 +639,16 @@ window.onload = function () {
     searchInputDom.value = ''
     replaceInputDom.value = ''
     instance.command.executeSearch(null)
+    setSearchResult()
   }
   searchInputDom.oninput = function () {
     instance.command.executeSearch(searchInputDom.value || null)
+    setSearchResult()
   }
   searchInputDom.onkeydown = function (evt) {
     if (evt.key === 'Enter') {
       instance.command.executeSearch(searchInputDom.value || null)
+      setSearchResult()
     }
   }
   searchCollapseDom.querySelector<HTMLButtonElement>('button')!.onclick = function () {
@@ -647,9 +660,11 @@ window.onload = function () {
   }
   searchCollapseDom.querySelector<HTMLDivElement>('.arrow-left')!.onclick = function () {
     instance.command.executeSearchNavigatePre()
+    setSearchResult()
   }
   searchCollapseDom.querySelector<HTMLDivElement>('.arrow-right')!.onclick = function () {
     instance.command.executeSearchNavigateNext()
+    setSearchResult()
   }
 
   document.querySelector<HTMLDivElement>('.menu-item__print')!.onclick = function () {

src/style.css

@@ -472,7 +472,7 @@ ul {
 }
 
 .menu-item .menu-item__search__collapse {
-  width: 235px;
+  width: 260px;
   height: 72px;
   box-sizing: border-box;
   position: absolute;
@@ -489,7 +489,7 @@ ul {
 }
 
 .menu-item .menu-item__search__collapse>div {
-  width: 225px;
+  width: 250px;
   height: 36px;
   padding: 0 5px;
   line-height: 36px;
@@ -500,6 +500,7 @@ ul {
 }
 
 .menu-item .menu-item__search__collapse>div input {
+  width: 205px;
   height: 27px;
   appearance: none;
   background-color: #fff;
@@ -544,9 +545,15 @@ ul {
   position: relative;
 }
 
+.menu-item .menu-item__search__collapse__search label {
+  right: 110px;
+  font-size: 12px;
+  color: #3d4757;
+  position: absolute;
+}
+
 .menu-item .menu-item__search__collapse__search>input {
-  width: 181px;
+  padding: 5px 90px 5px 5px !important;
-  padding: 5px 60px 5px 5px !important;
 }
 
 .menu-item .menu-item__search__collapse__search>div {