improve: range style callback and inactive cursor style #204

src/editor/core/cursor/Cursor.ts

@@ -12,6 +12,7 @@ export type IDrawCursorOption = ICursorOption &
 {
   isShow?: boolean;
   isBlink?: boolean;
+  isFocus?: boolean;
 }
 
 export class Cursor {
@@ -47,6 +48,10 @@ export class Cursor {
     return this.cursorAgent.getAgentCursorDom()
   }
 
+  public getAgentIsActive(): boolean {
+    return this.getAgentDom() === document.activeElement
+  }
+
   public getAgentDomValue(): string {
     return this.getAgentDom().value
   }
@@ -86,7 +91,8 @@ export class Cursor {
       color,
       width,
       isShow = true,
-      isBlink = true
+      isBlink = true,
+      isFocus = true
     } = { ...cursor, ...payload }
     // 设置光标代理
     const height = this.draw.getHeight()
@@ -99,10 +105,12 @@ export class Cursor {
     const offsetHeight = metrics.height / 4
     const cursorHeight = metrics.height + offsetHeight * 2
     const agentCursorDom = this.cursorAgent.getAgentCursorDom()
+    if (isFocus) {
       setTimeout(() => {
         agentCursorDom.focus()
         agentCursorDom.setSelectionRange(0, 0)
       })
+    }
     // fillText位置 + 文字基线到底部距离 - 模拟光标偏移量
     const descent = metrics.boundingBoxDescent < 0 ? 0 : metrics.boundingBoxDescent
     const cursorTop = (leftTop[1] + ascent) + descent - (cursorHeight - offsetHeight) + preY

src/editor/core/event/GlobalEvent.ts

@@ -83,6 +83,7 @@ export class GlobalEvent {
     )
     if (outerEditorDom) {
       this.setRangeStyle()
+      this.watchCursorActive()
       return
     }
     this.cursor.recoveryCursor()
@@ -103,6 +104,20 @@ export class GlobalEvent {
     this.range.setRangeStyle()
   }
 
+  public watchCursorActive() {
+    // 选区闭合&实际光标移出光标代理
+    if (!this.range.getIsCollapsed()) return
+    setTimeout(() => {
+      // 将模拟光标变成失活显示状态
+      if (!this.cursor?.getAgentIsActive()) {
+        this.cursor?.drawCursor({
+          isFocus: false,
+          isBlink: false
+        })
+      }
+    })
+  }
+
   public setPageScale = (evt: WheelEvent) => {
     if (!evt.ctrlKey) return
     evt.preventDefault()

src/editor/core/range/RangeManager.ts

@@ -226,7 +226,8 @@ export class RangeManager {
   public setRangeStyle() {
     if (!this.listener.rangeStyleChange) return
     // 结束光标位置
-    const { endIndex, isCrossRowCol } = this.range
+    const { startIndex, endIndex, isCrossRowCol } = this.range
+    if (!~startIndex && !~endIndex) return
     let curElement: IElement | null
     if (isCrossRowCol) {
       // 单元格选择以当前表格定位