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 &
|
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()
|
||||||
|
|||||||
Reference in New Issue
Block a user