improve: compute zone tooltip performance

src/editor/core/zone/Zone.ts

@@ -27,7 +27,7 @@ export class Zone {
     this.indicatorContainer = null
     // 区域提示
     if (!this.options.zone.tipDisabled) {
-      new ZoneTip(draw)
+      new ZoneTip(draw, this)
     }
   }
 
@@ -71,6 +71,26 @@ export class Zone {
     })
   }
 
+  public getZoneByY(y: number): EditorZone {
+    // 页眉底部距离页面顶部距离
+    const header = this.draw.getHeader()
+    const headerBottomY = header.getHeaderTop() + header.getHeight()
+    // 页脚上部距离页面顶部距离
+    const footer = this.draw.getFooter()
+    const pageHeight = this.draw.getHeight()
+    const footerTopY =
+      pageHeight - (footer.getFooterBottom() + footer.getHeight())
+    // 页眉：当前位置小于页眉底部位置
+    if (y < headerBottomY) {
+      return EditorZone.HEADER
+    }
+    // 页脚：当前位置大于页脚顶部位置
+    if (y > footerTopY) {
+      return EditorZone.FOOTER
+    }
+    return EditorZone.MAIN
+  }
+
   public drawZoneIndicator() {
     this._clearZoneIndicator()
     if (!this.isHeaderActive() && !this.isFooterActive()) return

src/editor/core/zone/ZoneTip.ts

@@ -3,10 +3,10 @@ import { EditorZone } from '../../dataset/enum/Editor'
 import { throttle } from '../../utils'
 import { Draw } from '../draw/Draw'
 import { I18n } from '../i18n/I18n'
-import { Position } from '../position/Position'
+import { Zone } from './Zone'
 
 export class ZoneTip {
-  private position: Position
+  private zone: Zone
   private i18n: I18n
   private container: HTMLDivElement
   private pageContainer: HTMLDivElement
@@ -16,8 +16,8 @@ export class ZoneTip {
   private tipContent: HTMLSpanElement
   private currentMoveZone: EditorZone | undefined
 
-  constructor(draw: Draw) {
-    this.position = draw.getPosition()
+  constructor(draw: Draw, zone: Zone) {
+    this.zone = zone
     this.i18n = draw.getI18n()
     this.container = draw.getContainer()
     this.pageContainer = draw.getPageContainer()
@@ -36,22 +36,19 @@ export class ZoneTip {
       'mousemove',
       throttle((evt: MouseEvent) => {
         if (this.isDisableMouseMove) return
-        const pageNo = Number((<HTMLCanvasElement>evt.target).dataset.index)
-        if (Number.isNaN(pageNo)) {
-          this._updateZoneTip(false)
-        } else {
-          const positionInfo = this.position.getPositionByXY({
-            x: evt.offsetX,
-            y: evt.offsetY,
-            pageNo
-          })
-          this.currentMoveZone = positionInfo.zone
+        if (evt.target instanceof HTMLCanvasElement) {
+          const mousemoveZone = this.zone.getZoneByY(evt.offsetY)
+          this.currentMoveZone = mousemoveZone
+          // 激活区域是正文，移动区域是页眉、页脚时绘制
           this._updateZoneTip(
-            positionInfo.zone === EditorZone.HEADER ||
-              positionInfo.zone === EditorZone.FOOTER,
+            this.zone.getZone() === EditorZone.MAIN &&
+              (mousemoveZone === EditorZone.HEADER ||
+                mousemoveZone === EditorZone.FOOTER),
             evt.x,
             evt.y
           )
+        } else {
+          this._updateZoneTip(false)
         }
       }, 250)
     )

src/mock.ts

@@ -479,5 +479,8 @@ export const options: IEditorOption = {
   placeholder: {
     data: '请输入正文'
   },
+  zone: {
+    tipDisabled: false
+  },
   maskMargin: [60, 0, 30, 0] // 菜单栏高度60，底部工具栏30为遮盖层
 }