feat: enable keyboard event when image resizer (#179)
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -95,6 +95,10 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
|
||||
srcKey: 'laTexSVG'
|
||||
}
|
||||
: {})
|
||||
// 光标事件代理丢失,重新定位
|
||||
draw.getCursor().drawCursor({
|
||||
isShow: false
|
||||
})
|
||||
}
|
||||
// 表格工具组件
|
||||
const tableTool = draw.getTableTool()
|
||||
|
||||
Reference in New Issue
Block a user