From 9f37995a23e5655ee9011e19ce7b7aed1f9298eb Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Tue, 7 May 2024 21:05:46 +0800 Subject: [PATCH] fix: image resizer position boundary error #538 --- src/editor/core/draw/Draw.ts | 65 +++++++++++++------ .../core/draw/particle/previewer/Previewer.ts | 19 ++++-- src/editor/core/position/Position.ts | 4 ++ src/editor/dataset/constant/Element.ts | 5 ++ src/editor/interface/Position.ts | 2 + 5 files changed, 72 insertions(+), 23 deletions(-) diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 8c39fe5..3e964b6 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -83,6 +83,7 @@ import { ImageObserver } from '../observer/ImageObserver' import { Zone } from '../zone/Zone' import { Footer } from './frame/Footer' import { + IMAGE_ELEMENT_TYPE, INLINE_ELEMENT_TYPE, TEXTLIKE_ELEMENT_TYPE } from '../../dataset/constant/Element' @@ -2278,26 +2279,9 @@ export class Draw { } else { this._immediateRender() } - const positionContext = this.position.getPositionContext() // 光标重绘 if (isSetCursor) { - const positionList = this.position.getPositionList() - if (positionContext.isTable) { - const { index, trIndex, tdIndex } = positionContext - const elementList = this.getOriginalElementList() - const tablePositionList = - elementList[index!].trList?.[trIndex!].tdList[tdIndex!].positionList - if (curIndex === undefined && tablePositionList) { - curIndex = tablePositionList.length - 1 - } - const tablePosition = tablePositionList?.[curIndex!] - this.position.setCursorPosition(tablePosition || null) - } else { - this.position.setCursorPosition( - curIndex !== undefined ? positionList[curIndex] : null - ) - } - this.cursor.drawCursor() + curIndex = this.setCursor(curIndex) } // 历史记录用于undo、redo（非首次渲染内容变更 || 第一次存在光标时） if ( @@ -2309,7 +2293,11 @@ export class Draw { // 信息变动回调 nextTick(() => { // 表格工具重新渲染 - if (isCompute && !this.isReadonly() && positionContext.isTable) { + if ( + isCompute && + !this.isReadonly() && + this.position.getPositionContext().isTable + ) { this.tableTool.render() } // 页眉指示器重新渲染 @@ -2335,6 +2323,45 @@ export class Draw { }) } + public setCursor(curIndex: number | undefined) { + const positionContext = this.position.getPositionContext() + const positionList = this.position.getPositionList() + if (positionContext.isTable) { + const { index, trIndex, tdIndex } = positionContext + const elementList = this.getOriginalElementList() + const tablePositionList = + elementList[index!].trList?.[trIndex!].tdList[tdIndex!].positionList + if (curIndex === undefined && tablePositionList) { + curIndex = tablePositionList.length - 1 + } + const tablePosition = tablePositionList?.[curIndex!] + this.position.setCursorPosition(tablePosition || null) + } else { + this.position.setCursorPosition( + curIndex !== undefined ? positionList[curIndex] : null + ) + } + // 定位到图片元素并且位置发生变化 + let isShowCursor = true + if ( + curIndex !== undefined && + positionContext.isImage && + positionContext.isDirectHit + ) { + const elementList = this.getElementList() + const element = elementList[curIndex] + if (IMAGE_ELEMENT_TYPE.includes(element.type!)) { + isShowCursor = false + const position = this.position.getCursorPosition() + this.previewer.updateResizer(element, position) + } + } + this.cursor.drawCursor({ + isShow: isShowCursor + }) + return curIndex + } + public submitHistory(curIndex: number | undefined) { const positionContext = this.position.getPositionContext() const oldElementList = getSlimCloneElementList(this.elementList) diff --git a/src/editor/core/draw/particle/previewer/Previewer.ts b/src/editor/core/draw/particle/previewer/Previewer.ts index 15b9fb9..7f9fc33 100644 --- a/src/editor/core/draw/particle/previewer/Previewer.ts +++ b/src/editor/core/draw/particle/previewer/Previewer.ts @@ -423,7 +423,19 @@ export class Previewer { position: IElementPosition | null = null, options: IPreviewerDrawOption = {} ) { + // 缓存配置 this.previewerDrawOption = options + this.curElementSrc = element[options.srcKey || 'value'] || '' + // 更新渲染尺寸及位置 + this.updateResizer(element, position) + // 监听事件 + document.addEventListener('keydown', this._keydown) + } + + public updateResizer( + element: IElement, + position: IElementPosition | null = null + ) { const { scale } = this.options const elementWidth = element.width! * scale const elementHeight = element.height! * scale @@ -439,12 +451,11 @@ export class Previewer { // 更新预览包围框尺寸 this._updateResizerRect(elementWidth, elementHeight) this.resizerSelection.style.display = 'block' + // 缓存基础信息 this.curElement = element - this.curElementSrc = element[options.srcKey || 'value'] || '' this.curPosition = position - this.width = this.curElement.width! * scale - this.height = this.curElement.height! * scale - document.addEventListener('keydown', this._keydown) + this.width = elementWidth + this.height = elementHeight } public clearResizer() { diff --git a/src/editor/core/position/Position.ts b/src/editor/core/position/Position.ts index 3faa0fe..f17d57c 100644 --- a/src/editor/core/position/Position.ts +++ b/src/editor/core/position/Position.ts @@ -666,6 +666,8 @@ export class Position { isCheckbox, isRadio, isControl, + isImage, + isDirectHit, isTable, trIndex, tdIndex, @@ -679,6 +681,8 @@ export class Position { isCheckbox: isCheckbox || false, isRadio: isRadio || false, isControl: isControl || false, + isImage: isImage || false, + isDirectHit: isDirectHit || false, index, trIndex, tdIndex, diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts index 0c51600..df0614a 100644 --- a/src/editor/dataset/constant/Element.ts +++ b/src/editor/dataset/constant/Element.ts @@ -131,6 +131,11 @@ export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [ ElementType.DATE ] +export const IMAGE_ELEMENT_TYPE: ElementType[] = [ + ElementType.IMAGE, + ElementType.LATEX +] + export const INLINE_ELEMENT_TYPE: ElementType[] = [ ElementType.BLOCK, ElementType.PAGE_BREAK, diff --git a/src/editor/interface/Position.ts b/src/editor/interface/Position.ts index b5c030b..8de3a3c 100644 --- a/src/editor/interface/Position.ts +++ b/src/editor/interface/Position.ts @@ -44,6 +44,8 @@ export interface IPositionContext { isCheckbox?: boolean isRadio?: boolean isControl?: boolean + isImage?: boolean + isDirectHit?: boolean index?: number trIndex?: number tdIndex?: number