From 8494f4698f5d0c814a92b82ceae9f92ac1094e50 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Wed, 21 Sep 2022 21:20:22 +0800 Subject: [PATCH 1/4] feat:add search navigate --- index.html | 6 +++ src/assets/images/arrow-left.svg | 1 + src/assets/images/arrow-right.svg | 1 + src/editor/core/command/Command.ts | 12 ++++++ src/editor/core/command/CommandAdapt.ts | 23 +++++++++- src/editor/core/draw/Draw.ts | 17 ++------ src/editor/core/draw/interactive/Search.ts | 50 +++++++++++++++++++++- src/editor/index.ts | 1 + src/editor/interface/Editor.ts | 1 + src/main.ts | 6 +++ src/style.css | 46 ++++++++++++++++++++ 11 files changed, 148 insertions(+), 16 deletions(-) create mode 100644 src/assets/images/arrow-left.svg create mode 100644 src/assets/images/arrow-right.svg diff --git a/index.html b/index.html index 2503cfe..6925fc4 100644 --- a/index.html +++ b/index.html @@ -194,6 +194,12 @@
+
+ +
+
+ +
×
diff --git a/src/assets/images/arrow-left.svg b/src/assets/images/arrow-left.svg new file mode 100644 index 0000000..b55538b --- /dev/null +++ b/src/assets/images/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/arrow-right.svg b/src/assets/images/arrow-right.svg new file mode 100644 index 0000000..1aadb00 --- /dev/null +++ b/src/assets/images/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 53a8ed9..cf07244 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -56,6 +56,8 @@ export class Command { private static addWatermark: CommandAdapt['addWatermark'] private static deleteWatermark: CommandAdapt['deleteWatermark'] private static search: CommandAdapt['search'] + private static searchNavigatePre: CommandAdapt['searchNavigatePre'] + private static searchNavigateNext: CommandAdapt['searchNavigateNext'] private static replace: CommandAdapt['replace'] private static print: CommandAdapt['print'] private static replaceImageElement: CommandAdapt['replaceImageElement'] @@ -122,6 +124,8 @@ export class Command { Command.addWatermark = adapt.addWatermark.bind(adapt) Command.deleteWatermark = adapt.deleteWatermark.bind(adapt) Command.search = adapt.search.bind(adapt) + Command.searchNavigatePre = adapt.searchNavigatePre.bind(adapt) + Command.searchNavigateNext = adapt.searchNavigateNext.bind(adapt) Command.replace = adapt.replace.bind(adapt) Command.print = adapt.print.bind(adapt) Command.replaceImageElement = adapt.replaceImageElement.bind(adapt) @@ -333,6 +337,14 @@ export class Command { return Command.search(payload) } + public executeSearchNavigatePre() { + return Command.searchNavigatePre() + } + + public executeSearchNavigateNext() { + return Command.searchNavigateNext() + } + 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 c3e1b38..368da56 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -19,6 +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 { TableTool } from '../draw/particle/table/TableTool' import { CanvasEvent } from '../event/CanvasEvent' import { HistoryManager } from '../history/HistoryManager' @@ -40,6 +41,7 @@ export class CommandAdapt { private options: Required private control: Control private workerManager: WorkerManager + private searchManager: Search constructor(draw: Draw) { this.draw = draw @@ -51,6 +53,7 @@ export class CommandAdapt { this.options = draw.getOptions() this.control = draw.getControl() this.workerManager = draw.getWorkerManager() + this.searchManager = draw.getSearch() } public mode(payload: EditorMode) { @@ -1211,7 +1214,25 @@ export class CommandAdapt { } public search(payload: string | null) { - this.draw.setSearchKeyword(payload) + this.searchManager.setSearchKeyword(payload) + this.draw.render({ + isSetCursor: false, + isSubmitHistory: false + }) + } + + public searchNavigatePre() { + const index = this.searchManager.searchNavigatePre() + if (index === null) return + this.draw.render({ + isSetCursor: false, + isSubmitHistory: false + }) + } + + public searchNavigateNext() { + const index = this.searchManager.searchNavigateNext() + if (index === null) return this.draw.render({ isSetCursor: false, isSubmitHistory: false diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 99502fe..ecac428 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -92,7 +92,6 @@ export class Draw { private rowList: IRow[] private painterStyle: IElementStyle | null private painterOptions: IPainterOptions | null - private searchKeyword: string | null private visiblePageNoList: number[] private intersectionPageNo: number @@ -155,7 +154,6 @@ export class Draw { this.rowList = [] this.painterStyle = null this.painterOptions = null - this.searchKeyword = null this.visiblePageNoList = [] this.intersectionPageNo = 0 @@ -417,14 +415,6 @@ export class Draw { } } - public getSearchKeyword(): string | null { - return this.searchKeyword - } - - public setSearchKeyword(payload: string | null) { - this.searchKeyword = payload - } - public setDefaultRange() { if (!this.elementList.length) return setTimeout(() => { @@ -995,7 +985,7 @@ export class Draw { // 绘制页码 this.pageNumber.render(ctx, pageNo) // 搜索匹配绘制 - if (this.searchKeyword) { + if (this.search.getSearchKeyword()) { this.search.render(ctx, pageNo) } // 绘制水印 @@ -1017,8 +1007,9 @@ export class Draw { // 计算行信息 if (isComputeRowList) { this.rowList = this._computeRowList(innerWidth, this.elementList) - if (this.searchKeyword) { - this.search.compute(this.searchKeyword) + const searchKeyword = this.search.getSearchKeyword() + if (searchKeyword) { + this.search.compute(searchKeyword) } } // 清除光标等副作用 diff --git a/src/editor/core/draw/interactive/Search.ts b/src/editor/core/draw/interactive/Search.ts index ece54f2..62ba9b8 100644 --- a/src/editor/core/draw/interactive/Search.ts +++ b/src/editor/core/draw/interactive/Search.ts @@ -15,15 +15,56 @@ export class Search { private draw: Draw private options: Required private position: Position + private searchKeyword: string | null + private searchNavigateIndex: number | null + private searchMatchList: ISearchResult[] constructor(draw: Draw) { this.draw = draw this.options = draw.getOptions() this.position = draw.getPosition() + this.searchKeyword = null + this.searchNavigateIndex = null this.searchMatchList = [] } + public getSearchKeyword(): string | null { + return this.searchKeyword + } + + public setSearchKeyword(payload: string | null) { + this.searchKeyword = payload + if (!payload) { + this.searchNavigateIndex = null + } + } + + public searchNavigatePre(): number | null { + if (!this.searchMatchList.length) return null + if (this.searchNavigateIndex === null) { + this.searchNavigateIndex = 0 + } else if (this.searchNavigateIndex === 0) { + this.searchNavigateIndex = this.searchMatchList.length - 1 + } else { + this.searchNavigateIndex -= 1 + } + return this.searchNavigateIndex + } + + public searchNavigateNext(): number | null { + if (!this.searchMatchList.length) return null + if ( + this.searchNavigateIndex === null + || this.searchNavigateIndex + 1 === this.searchMatchList.length + ) { + this.searchNavigateIndex = 0 + } else { + this.searchNavigateIndex += 1 + } + return this.searchNavigateIndex + } + public getSearchMatchList(): ISearchResult[] { return this.searchMatchList } @@ -122,12 +163,11 @@ export class Search { public render(ctx: CanvasRenderingContext2D, pageIndex: number) { if (!this.searchMatchList || !this.searchMatchList.length) return - const { searchMatchAlpha, searchMatchColor } = this.options + const { searchMatchAlpha, searchMatchColor, searchNavigateMatchColor } = this.options const positionList = this.position.getOriginalPositionList() const elementList = this.draw.getOriginalElementList() ctx.save() ctx.globalAlpha = searchMatchAlpha - ctx.fillStyle = searchMatchColor for (let s = 0; s < this.searchMatchList.length; s++) { const searchMatch = this.searchMatchList[s] let position: IElementPosition | null = null @@ -140,6 +180,12 @@ export class Search { if (!position) continue const { coordinate: { leftTop, leftBottom, rightTop }, pageNo } = position if (pageNo !== pageIndex) continue + // 高亮当前搜索词 + if (s === this.searchNavigateIndex) { + ctx.fillStyle = searchNavigateMatchColor + } else { + ctx.fillStyle = searchMatchColor + } const x = leftTop[0] const y = leftTop[1] const width = rightTop[0] - leftTop[0] diff --git a/src/editor/index.ts b/src/editor/index.ts index 3ccf63e..d2351e6 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -70,6 +70,7 @@ export default class Editor { rangeMinWidth: 5, searchMatchAlpha: 0.6, searchMatchColor: '#FFFF00', + searchNavigateMatchColor: '#AAD280', highlightAlpha: 0.6, resizerColor: '#4182D9', resizerSize: 5, diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 138559e..5492618 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -27,6 +27,7 @@ export interface IEditorOption { rangeAlpha?: number; rangeMinWidth?: number; searchMatchColor?: string; + searchNavigateMatchColor?: string; searchMatchAlpha?: number; highlightAlpha?: number; resizerColor?: string; diff --git a/src/main.ts b/src/main.ts index ea3cf48..85b80e8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -645,6 +645,12 @@ window.onload = function () { instance.command.executeReplace(replaceValue) } } + searchCollapseDom.querySelector('.arrow-left')!.onclick = function () { + instance.command.executeSearchNavigatePre() + } + searchCollapseDom.querySelector('.arrow-right')!.onclick = function () { + instance.command.executeSearchNavigateNext() + } document.querySelector('.menu-item__print')!.onclick = function () { console.log('print') diff --git a/src/style.css b/src/style.css index fd6b073..d4f2472 100644 --- a/src/style.css +++ b/src/style.css @@ -540,6 +540,52 @@ ul { background: rgba(25, 55, 88, .04); } +.menu-item .menu-item__search__collapse__search { + position: relative; +} + +.menu-item .menu-item__search__collapse__search>input { + width: 181px; + padding: 5px 60px 5px 5px !important; +} + +.menu-item .menu-item__search__collapse__search>div { + width: 28px; + height: 27px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + border-left: 1px solid #e2e6ed; + transition: all .5s; +} + +.menu-item .menu-item__search__collapse__search>div:hover { + background-color: rgba(25, 55, 88, .04); +} + +.menu-item .menu-item__search__collapse__search i { + width: 6px; + height: 8px; + transform: translateY(1px); +} + +.menu-item .menu-item__search__collapse__search .arrow-left { + right: 76px; +} + +.menu-item .menu-item__search__collapse__search .arrow-left i { + background: url(./assets/images/arrow-left.svg) no-repeat; +} + +.menu-item .menu-item__search__collapse__search .arrow-right { + right: 48px; +} + +.menu-item .menu-item__search__collapse__search .arrow-right i { + background: url(./assets/images/arrow-right.svg) no-repeat; +} + .menu-item__print i { background-image: url('./assets/images/print.svg'); } From e096df5e7e2ced154ba4d32294fb22ff16250857 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Thu, 22 Sep 2022 14:02:31 +0800 Subject: [PATCH 2/4] fix:search multiple text navigate --- src/editor/core/draw/interactive/Search.ts | 62 +++++++++++++++++----- 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/src/editor/core/draw/interactive/Search.ts b/src/editor/core/draw/interactive/Search.ts index 62ba9b8..4f0bea1 100644 --- a/src/editor/core/draw/interactive/Search.ts +++ b/src/editor/core/draw/interactive/Search.ts @@ -17,15 +17,14 @@ export class Search { private position: Position private searchKeyword: string | null private searchNavigateIndex: number | null - private searchMatchList: ISearchResult[] constructor(draw: Draw) { this.draw = draw this.options = draw.getOptions() this.position = draw.getPosition() - this.searchKeyword = null this.searchNavigateIndex = null + this.searchKeyword = null this.searchMatchList = [] } @@ -41,30 +40,64 @@ export class Search { } public searchNavigatePre(): number | null { - if (!this.searchMatchList.length) return null + if (!this.searchMatchList.length || !this.searchKeyword) return null if (this.searchNavigateIndex === null) { this.searchNavigateIndex = 0 - } else if (this.searchNavigateIndex === 0) { - this.searchNavigateIndex = this.searchMatchList.length - 1 } else { - this.searchNavigateIndex -= 1 + let index = this.searchNavigateIndex - 1 + let isExistPre = false + const searchNavigateId = this.searchMatchList[this.searchNavigateIndex].groupId + while (index >= 0) { + const match = this.searchMatchList[index] + if (searchNavigateId !== match.groupId) { + isExistPre = true + this.searchNavigateIndex = index - (this.searchKeyword.length - 1) + break + } + index-- + } + if (!isExistPre) { + const lastSearchMatch = this.searchMatchList[this.searchMatchList.length - 1] + if (lastSearchMatch.groupId === searchNavigateId) return null + this.searchNavigateIndex = this.searchMatchList.length - 1 - (this.searchKeyword.length - 1) + } } return this.searchNavigateIndex } public searchNavigateNext(): number | null { - if (!this.searchMatchList.length) return null - if ( - this.searchNavigateIndex === null - || this.searchNavigateIndex + 1 === this.searchMatchList.length - ) { + if (!this.searchMatchList.length || !this.searchKeyword) return null + if (this.searchNavigateIndex === null) { this.searchNavigateIndex = 0 } else { - this.searchNavigateIndex += 1 + let index = this.searchNavigateIndex + 1 + let isExistNext = false + const searchNavigateId = this.searchMatchList[this.searchNavigateIndex].groupId + while (index < this.searchMatchList.length) { + const match = this.searchMatchList[index] + if (searchNavigateId !== match.groupId) { + isExistNext = true + this.searchNavigateIndex = index + break + } + index++ + } + if (!isExistNext) { + const firstSearchMatch = this.searchMatchList[0] + if (firstSearchMatch.groupId === searchNavigateId) return null + this.searchNavigateIndex = 0 + } } return this.searchNavigateIndex } + public getSearchNavigateIndexList() { + if (this.searchNavigateIndex === null || !this.searchKeyword) return [] + return new Array(this.searchKeyword.length) + .fill(this.searchNavigateIndex) + .map((navigate, index) => navigate + index) + } + public getSearchMatchList(): ISearchResult[] { return this.searchMatchList } @@ -162,7 +195,7 @@ export class Search { } public render(ctx: CanvasRenderingContext2D, pageIndex: number) { - if (!this.searchMatchList || !this.searchMatchList.length) return + if (!this.searchMatchList || !this.searchMatchList.length || !this.searchKeyword) return const { searchMatchAlpha, searchMatchColor, searchNavigateMatchColor } = this.options const positionList = this.position.getOriginalPositionList() const elementList = this.draw.getOriginalElementList() @@ -181,7 +214,8 @@ export class Search { const { coordinate: { leftTop, leftBottom, rightTop }, pageNo } = position if (pageNo !== pageIndex) continue // 高亮当前搜索词 - if (s === this.searchNavigateIndex) { + const searchMatchIndexList = this.getSearchNavigateIndexList() + if (searchMatchIndexList.includes(s)) { ctx.fillStyle = searchNavigateMatchColor } else { ctx.fillStyle = searchMatchColor From c16d07659aaf8b1657c9d7bf941690b80902b75b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Thu, 22 Sep 2022 17:48:55 +0800 Subject: [PATCH 3/4] feat:search navigate scroll into view --- src/editor/core/draw/interactive/Search.ts | 23 +++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/editor/core/draw/interactive/Search.ts b/src/editor/core/draw/interactive/Search.ts index 4f0bea1..6a52517 100644 --- a/src/editor/core/draw/interactive/Search.ts +++ b/src/editor/core/draw/interactive/Search.ts @@ -91,6 +91,26 @@ export class Search { return this.searchNavigateIndex } + public searchNavigateScrollIntoView(position: IElementPosition) { + const { coordinate: { leftTop, leftBottom, rightTop }, pageNo } = position + const height = this.draw.getHeight() + const pageGap = this.draw.getPageGap() + const preY = pageNo * (height + pageGap) + // 创建定位锚点 + const anchor = document.createElement('div') + anchor.style.position = 'absolute' + // 扩大搜索词尺寸，使可视范围更广 + const ANCHOR_OVERFLOW_SIZE = 50 + anchor.style.width = `${rightTop[0] - leftTop[0] + ANCHOR_OVERFLOW_SIZE}px` + anchor.style.height = `${leftBottom[1] - leftTop[1] + ANCHOR_OVERFLOW_SIZE}px` + anchor.style.left = `${leftTop[0]}px` + anchor.style.top = `${leftTop[1] + preY}px` + this.draw.getContainer().append(anchor) + // 移动到可视范围 + anchor.scrollIntoView(false) + anchor.remove() + } + public getSearchNavigateIndexList() { if (this.searchNavigateIndex === null || !this.searchKeyword) return [] return new Array(this.searchKeyword.length) @@ -213,10 +233,11 @@ export class Search { if (!position) continue const { coordinate: { leftTop, leftBottom, rightTop }, pageNo } = position if (pageNo !== pageIndex) continue - // 高亮当前搜索词 + // 高亮并定位当前搜索词 const searchMatchIndexList = this.getSearchNavigateIndexList() if (searchMatchIndexList.includes(s)) { ctx.fillStyle = searchNavigateMatchColor + this.searchNavigateScrollIntoView(position) } else { ctx.fillStyle = searchMatchColor } From 32277bc60c485264458a2a7b2f677225cab3f564 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Thu, 22 Sep 2022 17:57:42 +0800 Subject: [PATCH 4/4] fix:navigate error when search keyword change --- src/editor/core/draw/interactive/Search.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/editor/core/draw/interactive/Search.ts b/src/editor/core/draw/interactive/Search.ts index 6a52517..06f9e01 100644 --- a/src/editor/core/draw/interactive/Search.ts +++ b/src/editor/core/draw/interactive/Search.ts @@ -34,9 +34,7 @@ export class Search { public setSearchKeyword(payload: string | null) { this.searchKeyword = payload - if (!payload) { - this.searchNavigateIndex = null - } + this.searchNavigateIndex = null } public searchNavigatePre(): number | null {