fix: image resizer position boundary error #538

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()
+      curIndex = this.setCursor(curIndex)
-      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()
     }
     // 历史记录用于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)

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.width = elementWidth
-    this.height = this.curElement.height! * scale
+    this.height = elementHeight
-    document.addEventListener('keydown', this._keydown)
   }
 
   public clearResizer() {

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,

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,

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