From fb78f0a0aa4e19e156a09dc530e84bf86e5b861a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=A6=E8=8B=87=E5=85=88=E7=94=9F?=
 <61678719+1019058432@users.noreply.github.com>
Date: Sat, 22 Apr 2023 16:39:01 +0800
Subject: [PATCH] feat: enable keyboard event when image resizer (#179)

---
 src/editor/core/cursor/Cursor.ts                     |  3 +++
 src/editor/core/draw/particle/previewer/Previewer.ts | 10 ++++++++++
 src/editor/core/event/handlers/mousedown.ts          |  4 ++++
 3 files changed, 17 insertions(+)

diff --git a/src/editor/core/cursor/Cursor.ts b/src/editor/core/cursor/Cursor.ts
index 59bdc1a..26abea3 100644
--- a/src/editor/core/cursor/Cursor.ts
+++ b/src/editor/core/cursor/Cursor.ts
@@ -10,6 +10,7 @@ import { CursorAgent } from './CursorAgent'
 
 export type IDrawCursorOption = ICursorOption &
 {
+  isShow?: boolean;
   isBlink?: boolean;
 }
 
@@ -57,6 +58,7 @@ export class Cursor {
     const {
       color,
       width,
+      isShow = true,
       isBlink = true
     } = { ...cursor, ...payload }
     // 设置光标代理
@@ -81,6 +83,7 @@ export class Cursor {
     agentCursorDom.style.left = `${cursorLeft}px`
     agentCursorDom.style.top = `${cursorTop + cursorHeight - CURSOR_AGENT_HEIGHT * scale}px`
     // 模拟光标显示
+    if (!isShow) return
     const isReadonly = this.draw.isReadonly()
     this.cursorDom.style.width = `${width}px`
     this.cursorDom.style.backgroundColor = color
diff --git a/src/editor/core/draw/particle/previewer/Previewer.ts b/src/editor/core/draw/particle/previewer/Previewer.ts
index b9b24df..84b3a78 100644
--- a/src/editor/core/draw/particle/previewer/Previewer.ts
+++ b/src/editor/core/draw/particle/previewer/Previewer.ts
@@ -82,6 +82,14 @@ export class Previewer {
     return { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage }
   }
 
+  private _keydown = () => {
+    // 有键盘事件触发时，主动销毁拖拽选区
+    if (this.resizerSelection.style.display === 'block') {
+      this.clearResizer()
+      document.removeEventListener('keydown', this._keydown)
+    }
+  }
+
   private _mousedown(evt: MouseEvent) {
     this.canvas = this.draw.getPage()
     if (!this.curPosition || !this.curElement) return
@@ -327,10 +335,12 @@ export class Previewer {
     this.curPosition = position
     this.width = this.curElement.width! * scale
     this.height = this.curElement.height! * scale
+    document.addEventListener('keydown', this._keydown)
   }
 
   public clearResizer() {
     this.resizerSelection.style.display = 'none'
+    document.removeEventListener('keydown', this._keydown)
   }
 
 }
\ No newline at end of file
diff --git a/src/editor/core/event/handlers/mousedown.ts b/src/editor/core/event/handlers/mousedown.ts
index 37dd683..8372643 100644
--- a/src/editor/core/event/handlers/mousedown.ts
+++ b/src/editor/core/event/handlers/mousedown.ts
@@ -95,6 +95,10 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
           srcKey: 'laTexSVG'
         }
         : {})
+    // 光标事件代理丢失，重新定位
+    draw.getCursor().drawCursor({
+      isShow: false
+    })
   }
   // 表格工具组件
   const tableTool = draw.getTableTool()