From fee8c2238f86e427b8285805236a471ecfdea3b3 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Thu, 22 Sep 2022 20:14:15 +0800 Subject: [PATCH] feat:add search navigate result --- index.html | 1 + src/editor/core/command/Command.ts | 8 +++++++- src/editor/core/command/CommandAdapt.ts | 6 +++++- src/editor/core/draw/interactive/Search.ts | 24 ++++++++++++++++++++++ src/editor/index.ts | 4 +++- src/main.ts | 15 ++++++++++++++ src/style.css | 15 ++++++++++---- 7 files changed, 66 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 6925fc4..6edf530 100644 --- a/index.html +++ b/index.html @@ -194,6 +194,7 @@
+
diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index cf07244..ca3c1dc 100644 --- a/src/editor/core/command/Command.ts +++ b/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) } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 368da56..6a355cf 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/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 diff --git a/src/editor/core/draw/interactive/Search.ts b/src/editor/core/draw/interactive/Search.ts index 06f9e01..f052364 100644 --- a/src/editor/core/draw/interactive/Search.ts +++ b/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[] = [] // 分组 diff --git a/src/editor/index.ts b/src/editor/index.ts index d2351e6..db3d43e 100644 --- a/src/editor/index.ts +++ b/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 } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 85b80e8..ed6f662 100644 --- a/src/main.ts +++ b/src/main.ts @@ -611,6 +611,16 @@ window.onload = function () { const searchInputDom = document.querySelector('.menu-item__search__collapse__search input')! const replaceInputDom = document.querySelector('.menu-item__search__collapse__replace input')! const searchDom = document.querySelector('.menu-item__search')! + const searchResultDom = searchCollapseDom.querySelector('.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('button')!.onclick = function () { @@ -647,9 +660,11 @@ window.onload = function () { } searchCollapseDom.querySelector('.arrow-left')!.onclick = function () { instance.command.executeSearchNavigatePre() + setSearchResult() } searchCollapseDom.querySelector('.arrow-right')!.onclick = function () { instance.command.executeSearchNavigateNext() + setSearchResult() } document.querySelector('.menu-item__print')!.onclick = function () { diff --git a/src/style.css b/src/style.css index d4f2472..d3db468 100644 --- a/src/style.css +++ b/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 60px 5px 5px !important; + padding: 5px 90px 5px 5px !important; } .menu-item .menu-item__search__collapse__search>div {