feat: enable keyboard event when image resizer (#179)

pr675
芦苇先生 3 years ago committed by GitHub
parent 3daacc6cb8
commit fb78f0a0aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -10,6 +10,7 @@ import { CursorAgent } from './CursorAgent'
export type IDrawCursorOption = ICursorOption & export type IDrawCursorOption = ICursorOption &
{ {
isShow?: boolean;
isBlink?: boolean; isBlink?: boolean;
} }
@ -57,6 +58,7 @@ export class Cursor {
const { const {
color, color,
width, width,
isShow = true,
isBlink = true isBlink = true
} = { ...cursor, ...payload } } = { ...cursor, ...payload }
// 设置光标代理 // 设置光标代理
@ -81,6 +83,7 @@ export class Cursor {
agentCursorDom.style.left = `${cursorLeft}px` agentCursorDom.style.left = `${cursorLeft}px`
agentCursorDom.style.top = `${cursorTop + cursorHeight - CURSOR_AGENT_HEIGHT * scale}px` agentCursorDom.style.top = `${cursorTop + cursorHeight - CURSOR_AGENT_HEIGHT * scale}px`
// 模拟光标显示 // 模拟光标显示
if (!isShow) return
const isReadonly = this.draw.isReadonly() const isReadonly = this.draw.isReadonly()
this.cursorDom.style.width = `${width}px` this.cursorDom.style.width = `${width}px`
this.cursorDom.style.backgroundColor = color this.cursorDom.style.backgroundColor = color

@ -82,6 +82,14 @@ export class Previewer {
return { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage } return { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage }
} }
private _keydown = () => {
// 有键盘事件触发时,主动销毁拖拽选区
if (this.resizerSelection.style.display === 'block') {
this.clearResizer()
document.removeEventListener('keydown', this._keydown)
}
}
private _mousedown(evt: MouseEvent) { private _mousedown(evt: MouseEvent) {
this.canvas = this.draw.getPage() this.canvas = this.draw.getPage()
if (!this.curPosition || !this.curElement) return if (!this.curPosition || !this.curElement) return
@ -327,10 +335,12 @@ export class Previewer {
this.curPosition = position this.curPosition = position
this.width = this.curElement.width! * scale this.width = this.curElement.width! * scale
this.height = this.curElement.height! * scale this.height = this.curElement.height! * scale
document.addEventListener('keydown', this._keydown)
} }
public clearResizer() { public clearResizer() {
this.resizerSelection.style.display = 'none' this.resizerSelection.style.display = 'none'
document.removeEventListener('keydown', this._keydown)
} }
} }

@ -95,6 +95,10 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
srcKey: 'laTexSVG' srcKey: 'laTexSVG'
} }
: {}) : {})
// 光标事件代理丢失,重新定位
draw.getCursor().drawCursor({
isShow: false
})
} }
// 表格工具组件 // 表格工具组件
const tableTool = draw.getTableTool() const tableTool = draw.getTableTool()

Loading…
Cancel
Save