feat:set the cursor style when dragging text

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<IEditorOption>
+  private options: DeepRequired<IEditorOption>
   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() {

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 {

src/editor/dataset/constant/Cursor.ts

@@ -1 +1,10 @@
+import { ICursorOption } from '../../interface/Cursor'
+
 export const CURSOR_AGENT_HEIGHT = 12
+
+export const defaultCursorOption: Readonly<Required<ICursorOption>> = {
+  width: 1,
+  color: '#000000',
+  dragWidth: 2,
+  dragColor: '#0000FF'
+}

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<ICursorOption> = {
+      ...defaultCursorOption,
+      ...options.cursor
+    }
 
     const editorOptions: DeepRequired<IEditorOption> = {
       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

src/editor/interface/Cursor.ts

@@ -0,0 +1,6 @@
+export interface ICursorOption {
+  width?: number;
+  color?: string;
+  dragWidth?: number;
+  dragColor?: string;
+}

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 {