diff --git a/src/editor/core/cursor/Cursor.ts b/src/editor/core/cursor/Cursor.ts index 00eb399..cc5d043 100644 --- a/src/editor/core/cursor/Cursor.ts +++ b/src/editor/core/cursor/Cursor.ts @@ -1,16 +1,23 @@ import { CURSOR_AGENT_HEIGHT } from '../../dataset/constant/Cursor' import { EDITOR_PREFIX } from '../../dataset/constant/Editor' +import { DeepRequired } from '../../interface/Common' +import { ICursorOption } from '../../interface/Cursor' import { IEditorOption } from '../../interface/Editor' import { Draw } from '../draw/Draw' import { CanvasEvent } from '../event/CanvasEvent' import { Position } from '../position/Position' import { CursorAgent } from './CursorAgent' +export type IDrawCursorOption = ICursorOption & +{ + isBlink?: boolean; +} + export class Cursor { private draw: Draw private container: HTMLDivElement - private options: Required + private options: DeepRequired private position: Position private cursorDom: HTMLDivElement private cursorAgent: CursorAgent @@ -43,12 +50,16 @@ export class Cursor { return this.getAgentDom().value = '' } - public drawCursor() { - const isReadonly = this.draw.isReadonly() + public drawCursor(payload?: IDrawCursorOption) { const cursorPosition = this.position.getCursorPosition() if (!cursorPosition) return + const { scale, cursor } = this.options + const { + color, + width, + isBlink = true + } = { ...cursor, ...payload } // 设置光标代理 - const { scale } = this.options const height = this.draw.getHeight() const pageGap = this.draw.getPageGap() const { metrics, coordinate: { leftTop, rightTop }, ascent, pageNo } = cursorPosition @@ -68,13 +79,21 @@ export class Cursor { agentCursorDom.style.left = `${cursorLeft}px` agentCursorDom.style.top = `${cursorTop + cursorHeight - CURSOR_AGENT_HEIGHT * scale}px` // 模拟光标显示 + const isReadonly = this.draw.isReadonly() + this.cursorDom.style.width = `${width}px` + this.cursorDom.style.backgroundColor = color this.cursorDom.style.left = `${cursorLeft}px` this.cursorDom.style.top = `${cursorTop}px` this.cursorDom.style.display = isReadonly ? 'none' : 'block' this.cursorDom.style.height = `${cursorHeight}px` - setTimeout(() => { - this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor--animation`) - }, 200) + const animationClassName = `${EDITOR_PREFIX}-cursor--animation` + if (isBlink) { + setTimeout(() => { + this.cursorDom.classList.add(animationClassName) + }, 200) + } else { + this.cursorDom.classList.remove(animationClassName) + } } public recoveryCursor() { diff --git a/src/editor/core/event/handlers/drag.ts b/src/editor/core/event/handlers/drag.ts index 53eae8f..8cd937b 100644 --- a/src/editor/core/event/handlers/drag.ts +++ b/src/editor/core/event/handlers/drag.ts @@ -34,7 +34,12 @@ function dragover(evt: DragEvent | MouseEvent, host: CanvasEvent) { position.setCursorPosition(positionList[curIndex]) } const cursor = draw.getCursor() - cursor.drawCursor() + const { cursor: { dragColor, dragWidth } } = draw.getOptions() + cursor.drawCursor({ + width: dragWidth, + color: dragColor, + isBlink: false + }) } export default { diff --git a/src/editor/dataset/constant/Cursor.ts b/src/editor/dataset/constant/Cursor.ts index 780c4a0..98756dc 100644 --- a/src/editor/dataset/constant/Cursor.ts +++ b/src/editor/dataset/constant/Cursor.ts @@ -1 +1,10 @@ +import { ICursorOption } from '../../interface/Cursor' + export const CURSOR_AGENT_HEIGHT = 12 + +export const defaultCursorOption: Readonly> = { + width: 1, + color: '#000000', + dragWidth: 2, + dragColor: '#0000FF' +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index cfd99c5..7d03473 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -29,6 +29,8 @@ import { KeyMap } from './dataset/enum/KeyMap' import { BlockType } from './dataset/enum/Block' import { IBlock } from './interface/Block' import { ILang } from './interface/i18n/I18n' +import { ICursorOption } from './interface/Cursor' +import { defaultCursorOption } from './dataset/constant/Cursor' export default class Editor { @@ -54,6 +56,10 @@ export default class Editor { ...defaultCheckboxOption, ...options.checkbox } + const cursorOptions: Required = { + ...defaultCursorOption, + ...options.cursor + } const editorOptions: DeepRequired = { mode: EditorMode.EDIT, @@ -93,7 +99,8 @@ export default class Editor { header: headerOptions, watermark: waterMarkOptions, control: controlOptions, - checkbox: checkboxOptions + checkbox: checkboxOptions, + cursor: cursorOptions } formatElementList(elementList, { editorOptions diff --git a/src/editor/interface/Cursor.ts b/src/editor/interface/Cursor.ts new file mode 100644 index 0000000..0558db9 --- /dev/null +++ b/src/editor/interface/Cursor.ts @@ -0,0 +1,6 @@ +export interface ICursorOption { + width?: number; + color?: string; + dragWidth?: number; + dragColor?: string; +} \ No newline at end of file diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index bba5fc4..0e60f83 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -2,6 +2,7 @@ import { IElement } from '..' import { EditorMode, PageMode } from '../dataset/enum/Editor' import { ICheckboxOption } from './Checkbox' import { IControlOption } from './Control' +import { ICursorOption } from './Cursor' import { IHeader } from './Header' import { IMargin } from './Margin' import { IWatermark } from './Watermark' @@ -44,6 +45,7 @@ export interface IEditorOption { watermark?: IWatermark; control?: IControlOption; checkbox?: ICheckboxOption; + cursor?: ICursorOption; } export interface IEditorResult {