diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 8033957..7cbe8ac 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -1,7 +1,7 @@ import { IElement } from '../..' import { EditorMode } from '../../dataset/enum/Editor' import { RowFlex } from '../../dataset/enum/Row' -import { IDrawImagePayload } from '../../interface/Draw' +import { IDrawImagePayload, IPainterOptions } from '../../interface/Draw' import { IEditorResult } from '../../interface/Editor' import { IWatermark } from '../../interface/Watermark' import { CommandAdapt } from './CommandAdapt' @@ -155,8 +155,8 @@ export class Command { return Command.redo() } - public executePainter() { - return Command.painter() + public executePainter(options: IPainterOptions) { + return Command.painter(options) } public executeApplyPainterStyle() { diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index c1f9fd9..03dc0b3 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -6,7 +6,7 @@ import { EditorContext, EditorMode } from '../../dataset/enum/Editor' import { ElementType } from '../../dataset/enum/Element' import { ElementStyleKey } from '../../dataset/enum/ElementStyle' import { RowFlex } from '../../dataset/enum/Row' -import { IDrawImagePayload } from '../../interface/Draw' +import { IDrawImagePayload, IPainterOptions } from '../../interface/Draw' import { IEditorOption, IEditorResult } from '../../interface/Editor' import { IElement, IElementStyle } from '../../interface/Element' import { IColgroup } from '../../interface/table/Colgroup' @@ -126,7 +126,7 @@ export class CommandAdapt { this.historyManager.redo() } - public painter() { + public painter(options: IPainterOptions) { const isReadonly = this.draw.isReadonly() if (isReadonly) return const selection = this.range.getSelection() @@ -141,7 +141,7 @@ export class CommandAdapt { } }) }) - this.draw.setPainterStyle(painterStyle) + this.draw.setPainterStyle(painterStyle, options) } public applyPainterStyle() { diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index df83163..099595a 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -1,7 +1,7 @@ import { version } from '../../../../package.json' import { ZERO } from '../../dataset/constant/Common' import { RowFlex } from '../../dataset/enum/Row' -import { IDrawOption, IDrawRowPayload, IDrawRowResult } from '../../interface/Draw' +import { IDrawOption, IDrawRowPayload, IDrawRowResult, IPainterOptions } from '../../interface/Draw' import { IEditorOption, IEditorResult } from '../../interface/Editor' import { IElement, IElementMetrics, IElementPosition, IElementFillRect, IElementStyle } from '../../interface/Element' import { IRow, IRowElement } from '../../interface/Row' @@ -81,6 +81,7 @@ export class Draw { private rowList: IRow[] private painterStyle: IElementStyle | null + private painterOptions: IPainterOptions | null private searchKeyword: string | null private visiblePageNoList: number[] private intersectionPageNo: number @@ -138,6 +139,7 @@ export class Draw { this.rowList = [] this.painterStyle = null + this.painterOptions = null this.searchKeyword = null this.visiblePageNoList = [] this.intersectionPageNo = 0 @@ -327,8 +329,13 @@ export class Draw { return this.painterStyle && Object.keys(this.painterStyle).length ? this.painterStyle : null } - public setPainterStyle(payload: IElementStyle | null) { + public getPainterOptions(): IPainterOptions | null { + return this.painterOptions + } + + public setPainterStyle(payload: IElementStyle | null, options?: IPainterOptions) { this.painterStyle = payload + this.painterOptions = options || null if (this.getPainterStyle()) { this.pageList.forEach(c => c.style.cursor = 'copy') } diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 9a20142..032283b 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -74,10 +74,14 @@ export class CanvasEvent { } } - public applyPainterStyle() { + public clearPainterStyle() { this.pageList.forEach(p => { p.style.cursor = 'text' }) + this.draw.setPainterStyle(null) + } + + public applyPainterStyle() { const painterStyle = this.draw.getPainterStyle() if (!painterStyle) return const selection = this.range.getSelection() @@ -89,8 +93,12 @@ export class CanvasEvent { s[key] = painterStyle[key] as any }) }) - this.draw.setPainterStyle(null) this.draw.render({ isSetCursor: false }) + // 清除格式刷 + const painterOptions = this.draw.getPainterOptions() + if (!painterOptions || !painterOptions.isDblclick) { + this.clearPainterStyle() + } } public mousemove(evt: MouseEvent) { @@ -435,6 +443,8 @@ export class CanvasEvent { this.listener.saved(this.draw.getValue()) } evt.preventDefault() + } else if (evt.key === KeyMap.ESC) { + this.clearPainterStyle() } } diff --git a/src/editor/dataset/enum/Keymap.ts b/src/editor/dataset/enum/Keymap.ts index 5809e4b..38bcb85 100644 --- a/src/editor/dataset/enum/Keymap.ts +++ b/src/editor/dataset/enum/Keymap.ts @@ -6,6 +6,7 @@ export enum KeyMap { Right = 'ArrowRight', Up = 'ArrowUp', Down = 'ArrowDown', + ESC = 'Escape', A = 'a', C = 'c', S = 's', diff --git a/src/editor/interface/Draw.ts b/src/editor/interface/Draw.ts index 25e7dc0..4583173 100644 --- a/src/editor/interface/Draw.ts +++ b/src/editor/interface/Draw.ts @@ -35,4 +35,8 @@ export interface IDrawRowResult { x: number; y: number; index: number; +} + +export interface IPainterOptions { + isDblclick: boolean; } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index b8969ad..200b559 100644 --- a/src/main.ts +++ b/src/main.ts @@ -30,7 +30,15 @@ window.onload = function () { const painterDom = document.querySelector('.menu-item__painter')! painterDom.onclick = function () { console.log('painter') - instance.command.executePainter() + instance.command.executePainter({ + isDblclick: false + }) + } + painterDom.ondblclick = function () { + console.log('painter') + instance.command.executePainter({ + isDblclick: true + }) } document.querySelector('.menu-item__format')!.onclick = function () {