diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts index ee4af19..889be01 100644 --- a/src/editor/core/event/GlobalEvent.ts +++ b/src/editor/core/event/GlobalEvent.ts @@ -27,28 +27,34 @@ export class GlobalEvent { this.setRangeStyle() }) document.addEventListener('click', (evt) => { - this.recoverCursor(evt) - this.setRangeStyle() + this.recoverEffect(evt) }) document.addEventListener('mouseup', () => { this.setDragState() }) } - recoverCursor(evt: MouseEvent) { + recoverEffect(evt: MouseEvent) { if (!this.cursor) return const cursorDom = this.cursor.getCursorDom() const agentDom = this.cursor.getAgentDom() const innerDoms = [this.canvas, cursorDom, agentDom, document.body] - if (innerDoms.includes(evt.target as any)) return + if (innerDoms.includes(evt.target as any)) { + this.setRangeStyle() + return + } // 编辑器外部dom const outerEditorDom = findParent( evt.target as Element, (node: Node & Element) => !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT), true ) - if (outerEditorDom) return + if (outerEditorDom) { + this.setRangeStyle() + return + } this.cursor.recoveryCursor() + this.range.recoveryRangeStyle() } setDragState() { diff --git a/src/editor/core/range/RangeManager.ts b/src/editor/core/range/RangeManager.ts index b762493..a7bafd8 100644 --- a/src/editor/core/range/RangeManager.ts +++ b/src/editor/core/range/RangeManager.ts @@ -75,6 +75,24 @@ export class RangeManager { }) } + public recoveryRangeStyle() { + if (!this.listener.rangeStyleChange) return + const painter = !!this.draw.getPainterStyle() + const undo = this.historyManager.isCanUndo() + const redo = this.historyManager.isCanRedo() + this.listener.rangeStyleChange({ + undo, + redo, + painter, + bold: false, + italic: false, + underline: false, + strikeout: false, + color: null, + highlight: null + }) + } + public render(x: number, y: number, width: number, height: number) { this.ctx.save() this.ctx.globalAlpha = this.options.rangeAlpha diff --git a/src/main.ts b/src/main.ts index dfefbfb..b9fe1ac 100644 --- a/src/main.ts +++ b/src/main.ts @@ -18,6 +18,12 @@ window.onload = function () { const i = text.indexOf(b) return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : [] }).flat() + // 模拟高亮字 + const highlightText = ['血细胞比容'] + const highlightIndex: number[] = highlightText.map(b => { + const i = text.indexOf(b) + return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : [] + }).flat() // 组合数据 const data = text.split('').map((value, index) => { if (boldIndex.includes(index)) { @@ -34,6 +40,12 @@ window.onload = function () { size: 16 } } + if (highlightIndex.includes(index)) { + return { + value, + highlight: '#F2F27F' + } + } return { value, size: 16