feat: use table-relative coordinates for float images #1372

Hufe921 · web-flow · commit 1d403ea6f344 · 2026-05-16T22:54:01.000+08:00
diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts
@@ -1442,14 +1442,19 @@ export class CommandAdapt {
       display === ImageDisplay.FLOAT_BOTTOM
     ) {
       const positionList = this.position.getPositionList()
+      const positionContext = this.position.getPositionContext()
       const {
         pageNo,
         coordinate: { leftTop }
       } = positionList[startIndex]
+      const tablePosition = positionContext.isTable
+        ? this.position.getOriginalPositionList()[positionContext.index!]
+        : null
+      const tableLeftTop = tablePosition?.coordinate.leftTop
       element.imgFloatPosition = {
         pageNo,
-        x: leftTop[0],
-        y: leftTop[1]
+        x: tableLeftTop ? leftTop[0] - tableLeftTop[0] : leftTop[0],
+        y: tableLeftTop ? leftTop[1] - tableLeftTop[1] : leftTop[1]
       }
     } else {
       delete element.imgFloatPosition
diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts
@@ -2555,7 +2555,6 @@ export class Draw {
     ctx: CanvasRenderingContext2D,
     payload: IDrawFloatPayload
   ) {
-    const { scale } = this.options
     const floatPositionList = this.position.getFloatPositionList()
     const { imgDisplays, pageNo } = payload
     for (let e = 0; e < floatPositionList.length; e++) {
@@ -2569,13 +2568,8 @@ export class Draw {
         imgDisplays.includes(element.imgDisplay) &&
         element.type === ElementType.IMAGE
       ) {
-        const imgFloatPosition = element.imgFloatPosition!
-        this.imageParticle.render(
-          ctx,
-          element,
-          imgFloatPosition.x * scale,
-          imgFloatPosition.y * scale
-        )
+        const { x, y } = this.position.getFloatPositionCoordinate(floatPosition)
+        this.imageParticle.render(ctx, element, x, y)
       }
     }
   }
diff --git a/src/editor/core/draw/particle/ImageParticle.ts b/src/editor/core/draw/particle/ImageParticle.ts
@@ -91,9 +91,12 @@ export class ImageParticle {
     const height = this.draw.getHeight()
     const pageGap = this.draw.getPageGap()
     const preY = this.draw.getPageNo() * (height + pageGap)
-    const imgFloatPosition = element.imgFloatPosition!
-    floatImageContainer.style.left = `${imgFloatPosition.x * scale}px`
-    floatImageContainer.style.top = `${preY + imgFloatPosition.y * scale}px`
+    const position = this.draw.getPosition()
+    const floatPosition = position.getFloatPositionByElement(element)
+    if (!floatPosition) return
+    const { x, y } = position.getFloatPositionCoordinate(floatPosition)
+    floatImageContainer.style.left = `${x}px`
+    floatImageContainer.style.top = `${preY + y}px`
     floatImage.src = element.value
   }
 
diff --git a/src/editor/core/draw/particle/previewer/Previewer.ts b/src/editor/core/draw/particle/previewer/Previewer.ts
@@ -83,7 +83,6 @@ export class Previewer {
     element: IElement,
     position: IElementPosition | null = null
   ): { x: number; y: number } {
-    const { scale } = this.options
     let x = 0
     let y = 0
     const height = this.draw.getHeight()
@@ -92,8 +91,13 @@ export class Previewer {
     const preY = pageNo * (height + pageGap)
     // 优先使用浮动位置
     if (element.imgFloatPosition) {
-      x = element.imgFloatPosition.x! * scale
-      y = element.imgFloatPosition.y * scale + preY
+      const position = this.draw.getPosition()
+      const floatPosition = position.getFloatPositionByElement(element)
+      if (floatPosition) {
+        const coordinate = position.getFloatPositionCoordinate(floatPosition)
+        x = coordinate.x
+        y = coordinate.y + preY
+      }
     } else if (position) {
       const {
         coordinate: {
@@ -483,14 +487,14 @@ export class Previewer {
         i === 0 || i === 6 || i === 7
           ? -handleSize
           : i === 1 || i === 5
-          ? width / 2
-          : width - handleSize
+            ? width / 2
+            : width - handleSize
       const top =
         i === 0 || i === 1 || i === 2
           ? -handleSize
           : i === 3 || i === 7
-          ? height / 2 - handleSize
-          : height - handleSize
+            ? height / 2 - handleSize
+            : height - handleSize
       this.resizerHandleList[i].style.transform = `scale(${scale})`
       this.resizerHandleList[i].style.left = `${left}px`
       this.resizerHandleList[i].style.top = `${top}px`
diff --git a/src/editor/core/event/handlers/mouseup.ts b/src/editor/core/event/handlers/mouseup.ts
@@ -6,6 +6,7 @@ import { ImageDisplay } from '../../../dataset/enum/Common'
 import { ControlComponent, ControlType } from '../../../dataset/enum/Control'
 import { ElementType } from '../../../dataset/enum/Element'
 import { IElement } from '../../../interface/Element'
+import { IPositionContext } from '../../../interface/Position'
 import { deepClone, getUUID, omitObject } from '../../../utils'
 import { formatElementContext, formatElementList } from '../../../utils/element'
 import { CanvasEvent } from '../CanvasEvent'
@@ -26,9 +27,12 @@ function getElementIndexByDragId(dragId: string, elementList: IElement[]) {
 function moveImgPosition(
   element: IElement,
   evt: MouseEvent,
-  host: CanvasEvent
+  host: CanvasEvent,
+  cachePositionContext: IPositionContext | null | undefined,
+  positionContext: IPositionContext
 ) {
   const draw = host.getDraw()
+  const position = draw.getPosition()
   if (
     element.imgDisplay === ImageDisplay.SURROUND ||
     element.imgDisplay === ImageDisplay.FLOAT_TOP ||
@@ -37,10 +41,41 @@ function moveImgPosition(
     const moveX = evt.offsetX - host.mouseDownStartPosition!.x!
     const moveY = evt.offsetY - host.mouseDownStartPosition!.y!
     const imgFloatPosition = element.imgFloatPosition!
+    const wasInTable = cachePositionContext?.isTable
+    const isNowInTable = positionContext.isTable
+    let x = imgFloatPosition.x + moveX
+    let y = imgFloatPosition.y + moveY
+    const pageNo = draw.getPageNo()
+    if (wasInTable && !isNowInTable) {
+      // 从表格内移动到表格外：相对坐标转为绝对坐标
+      const cacheIndex = cachePositionContext?.index
+      if (cacheIndex !== undefined) {
+        const originalPositionList = position.getOriginalPositionList()
+        const tablePosition = originalPositionList[cacheIndex]
+        if (tablePosition) {
+          const [tableX, tableY] = tablePosition.coordinate.leftTop
+          x = imgFloatPosition.x + tableX + moveX
+          y = imgFloatPosition.y + tableY + moveY
+        }
+      }
+    } else if (!wasInTable && isNowInTable) {
+      // 从表格外移动到表格内：绝对坐标转为相对坐标
+      const nowIndex = positionContext.index
+      if (nowIndex !== undefined) {
+        const originalPositionList = position.getOriginalPositionList()
+        const tablePosition = originalPositionList[nowIndex]
+        if (tablePosition) {
+          const [tableX, tableY] = tablePosition.coordinate.leftTop
+          x = imgFloatPosition.x + moveX - tableX
+          y = imgFloatPosition.y + moveY - tableY
+        }
+      }
+    }
     element.imgFloatPosition = {
-      x: imgFloatPosition.x + moveX,
-      y: imgFloatPosition.y + moveY,
-      pageNo: draw.getPageNo()
+      ...imgFloatPosition,
+      x,
+      y,
+      pageNo
     }
   }
   draw.getImageParticle().destroyFloatImage()
@@ -88,7 +123,13 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
           dragElement.type === ElementType.IMAGE ||
           dragElement.type === ElementType.LATEX
         ) {
-          moveImgPosition(dragElement, evt, host)
+          moveImgPosition(
+            dragElement,
+            evt,
+            host,
+            host.cachePositionContext,
+            positionContext
+          )
           if (
             dragElement.imgDisplay === ImageDisplay.SURROUND ||
             dragElement.imgDisplay === ImageDisplay.FLOAT_TOP ||
@@ -298,7 +339,13 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
         dragElement.type === ElementType.IMAGE ||
         dragElement.type === ElementType.LATEX
       ) {
-        moveImgPosition(dragElement, evt, host)
+        moveImgPosition(
+          dragElement,
+          evt,
+          host,
+          host.cachePositionContext,
+          positionContext
+        )
         imgElement = dragElement
       }
     }
diff --git a/src/editor/core/position/Position.ts b/src/editor/core/position/Position.ts
@@ -107,6 +107,46 @@ export class Position {
     this.floatPositionList = payload
   }
 
+  public getFloatPositionByElement(element: IElement): IFloatPosition | null {
+    return (
+      this.floatPositionList.find(
+        floatPosition => floatPosition.element === element
+      ) || null
+    )
+  }
+
+  public getFloatPositionCoordinate(floatPosition: IFloatPosition): {
+    x: number
+    y: number
+  } {
+    const { scale } = this.options
+    const imgFloatPosition = floatPosition.element.imgFloatPosition!
+    let x = imgFloatPosition.x * scale
+    let y = imgFloatPosition.y * scale
+    const { index, isTable, zone } = floatPosition
+    if (isTable && index !== undefined) {
+      let positionList: IElementPosition[]
+      if (zone === EditorZone.HEADER) {
+        positionList = this.draw.getHeader().getPositionList()
+      } else if (zone === EditorZone.FOOTER) {
+        positionList = this.draw.getFooter().getPositionList()
+      } else {
+        positionList = this.positionList
+      }
+      const tablePosition = positionList[index]
+      if (tablePosition) {
+        const {
+          coordinate: {
+            leftTop: [tableX, tableY]
+          }
+        } = tablePosition
+        x += tableX
+        y += tableY
+      }
+    }
+    return { x, y }
+  }
+
   public computePageRowPosition(
     payload: IComputePageRowPositionPayload
   ): IComputePageRowPositionResult {
@@ -119,7 +159,8 @@ export class Position {
       startRowIndex,
       startIndex,
       innerWidth,
-      zone
+      zone,
+      tablePosition
     } = payload
     const {
       scale,
@@ -197,9 +238,10 @@ export class Position {
           }
           // 兼容浮动元素初始坐标为空的情况-默认使用左上坐标
           if (!element.imgFloatPosition) {
+            const tableLeftTop = tablePosition?.coordinate.leftTop
             element.imgFloatPosition = {
-              x,
-              y,
+              x: tableLeftTop ? x - tableLeftTop[0] : x,
+              y: tableLeftTop ? y - tableLeftTop[1] : y,
               pageNo
             }
           }
@@ -244,7 +286,8 @@ export class Position {
                 index: index - 1,
                 tdIndex: d,
                 trIndex: t,
-                zone
+                zone,
+                tablePosition: positionItem
               })
               // 垂直对齐方式
               if (
@@ -723,9 +766,8 @@ export class Position {
         payload.imgDisplays.includes(element.imgDisplay) &&
         (!floatElementZone || floatElementZone === currentZone)
       ) {
-        const imgFloatPosition = element.imgFloatPosition!
-        const imgFloatPositionX = imgFloatPosition.x * scale
-        const imgFloatPositionY = imgFloatPosition.y * scale
+        const { x: imgFloatPositionX, y: imgFloatPositionY } =
+          this.getFloatPositionCoordinate(this.floatPositionList[f])
         const elementWidth = element.width! * scale
         const elementHeight = element.height! * scale
         if (
diff --git a/src/editor/interface/Position.ts b/src/editor/interface/Position.ts
@@ -77,6 +77,7 @@ export interface IComputePageRowPositionPayload {
   trIndex?: number
   tdValueIndex?: number
   zone?: EditorZone
+  tablePosition?: IElementPosition
 }
 
 export interface IComputePageRowPositionResult {

Original file line number	Diff line number	Diff line change
`@@ -77,6 +77,7 @@ export interface IComputePageRowPositionPayload {`
`77`	`77`	`trIndex?: number`
`78`	`78`	`tdValueIndex?: number`
`79`	`79`	`zone?: EditorZone`
	`80`	`+ tablePosition?: IElementPosition`
`80`	`81`	`}`
`81`	`82`
`82`	`83`	`export interface IComputePageRowPositionResult {`