style: add header indicator

src/editor/assets/css/zone/zone.css

@@ -5,4 +5,29 @@
   background: rgb(218 231 252);
   position: absolute;
   transform: translate(10px, 10px);
-}
+}
+
+.ce-header-indicator-border__top,
+.ce-header-indicator-border__bottom,
+.ce-header-indicator-border__left,
+.ce-header-indicator-border__right {
+  display: block;
+  position: absolute;
+}
+
+.ce-header-indicator-border__top {
+  border-top: 2px dashed rgb(238, 238, 238);
+}
+
+.ce-header-indicator-border__bottom {
+  border-top: 2px dashed rgb(238, 238, 238);
+  width: 100%;
+}
+
+.ce-header-indicator-border__left {
+  border-left: 2px dashed rgb(238, 238, 238);
+}
+
+.ce-header-indicator-border__right {
+  border-right: 2px dashed rgb(238, 238, 238);
+}

src/editor/core/draw/Draw.ts

@@ -1362,6 +1362,10 @@ export class Draw {
       if (isCompute && !this.isReadonly() && positionContext.isTable) {
         this.tableTool.render()
       }
+      // 页眉指示器重新渲染
+      if (isCompute && !this.isReadonly() && this.zone.isHeaderActive()) {
+        this.zone.drawHeaderZoneIndicator()
+      }
       // 页面尺寸改变
       if (this.listener.pageSizeChange) {
         this.listener.pageSizeChange(this.pageRowList.length)
@@ -1380,4 +1384,4 @@ export class Draw {
     this.selectionObserver.removeEvent()
   }
 
-}
+}

src/editor/core/event/handlers/click.ts

@@ -11,6 +11,8 @@ function dblclick(host: CanvasEvent, evt: MouseEvent) {
     y: evt.offsetY
   })
   if (!~positionContext.index && positionContext.zone) {
+    const isReadonly = draw.isReadonly()
+    if (isReadonly) return
     draw.getZone().setZone(positionContext.zone)
     return
   }
@@ -104,4 +106,4 @@ function threeClick(host: CanvasEvent) {
 export default {
   dblclick,
   threeClick
-}
+}

src/editor/core/event/handlers/keydown.ts

@@ -1,3 +1,4 @@
+import { EditorZone } from '../../..'
 import { ZERO } from '../../../dataset/constant/Common'
 import { ElementType } from '../../../dataset/enum/Element'
 import { KeyMap } from '../../../dataset/enum/KeyMap'
@@ -260,6 +261,9 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) {
     evt.preventDefault()
   } else if (evt.key === KeyMap.ESC) {
     host.clearPainterStyle()
+    if (draw.getZone().isHeaderActive()) {
+      draw.getZone().setZone(EditorZone.MAIN)
+    }
     evt.preventDefault()
   } else if (evt.key === KeyMap.TAB) {
     draw.insertElementList([{
@@ -268,4 +272,4 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) {
     }])
     evt.preventDefault()
   }
-}
+}

src/editor/core/i18n/lang/en.json

@@ -61,5 +61,9 @@
     "hour": "Hour",
     "minute": "Minute",
     "second": "Second"
+  },
+  "global": {
+    "header": "Header",
+    "footer": "Footer"
   }
-}
+}

src/editor/core/i18n/lang/zh-CN.json

@@ -61,5 +61,9 @@
     "hour": "时",
     "minute": "分",
     "second": "秒"
+  },
+  "global": {
+    "header": "页眉",
+    "footer": "页脚"
   }
-}
+}

src/editor/core/zone/Zone.ts

@@ -1,10 +1,13 @@
 import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
 import { EditorZone } from '../../dataset/enum/Editor'
+import { IEditorOption } from '../../interface/Editor'
 import { Draw } from '../draw/Draw'
+import { I18n } from '../i18n/I18n'
 
 export class Zone {
-
   private draw: Draw
+  private options: Required<IEditorOption>
+  private i18n: I18n
   private container: HTMLDivElement
 
   private currentZone: EditorZone
@@ -12,6 +15,8 @@ export class Zone {
 
   constructor(draw: Draw) {
     this.draw = draw
+    this.i18n = draw.getI18n()
+    this.options = draw.getOptions()
     this.container = draw.getContainer()
     this.currentZone = EditorZone.MAIN
     this.headerIndicatorContainer = null
@@ -40,24 +45,64 @@ export class Zone {
     })
     // 页眉指示器
     if (this.isHeaderActive()) {
-      this._drawHeaderZoneIndicator()
+      this.drawHeaderZoneIndicator()
     } else {
       this._clearHeaderZoneIndicator()
     }
   }
 
-  private _drawHeaderZoneIndicator() {
+  public drawHeaderZoneIndicator() {
+    this._clearHeaderZoneIndicator()
+    const { scale } = this.options
     this.headerIndicatorContainer = document.createElement('div')
     this.headerIndicatorContainer.classList.add(`${EDITOR_PREFIX}-header-indicator`)
     const pageList = this.draw.getPageList()
     const pageHeight = this.draw.getHeight()
     const pageGap = this.draw.getPageGap()
     const preY = pageHeight + pageGap
+    const headerHeight = this.draw.getHeader().getHeight()
+    const headerTop = (this.options.header?.top ?? 0) * scale
+    const margins = this.draw.getMargins()
+
     for (let p = 0; p < pageList.length; p++) {
       const indicator = document.createElement('div')
-      indicator.innerText = `编辑页眉`
-      indicator.style.top = `${preY * p}px`
+      indicator.innerText = this.i18n.t('global.header')
+      document.body.appendChild(indicator)
+      const indicatorStyle = getComputedStyle(indicator)
+      indicator.style.top = `${preY * p + headerHeight + parseFloat(indicatorStyle.height) * scale}px`
       this.headerIndicatorContainer.append(indicator)
+
+      // 绘制上，左，下，右边线
+
+      // 上边线
+      const lineTop = document.createElement('span')
+      lineTop.classList.add(`${EDITOR_PREFIX}-header-indicator-border__top`)
+      lineTop.style.top = `${(preY * p + headerTop)}px`
+      lineTop.style.width = this.draw.getInnerWidth() + 'px'
+      lineTop.style.marginLeft = margins[3] + 'px'
+      this.headerIndicatorContainer.append(lineTop)
+
+      // 左边线
+      const lineLeft = document.createElement('span')
+      lineLeft.classList.add(`${EDITOR_PREFIX}-header-indicator-border__left`)
+      lineLeft.style.top = `${(preY * p + headerTop)}px`
+      lineLeft.style.height = `${headerHeight}px`
+      lineLeft.style.left = margins[3] + 'px'
+      this.headerIndicatorContainer.append(lineLeft)
+
+      // 下边线
+      const lineBottom = document.createElement('span')
+      lineBottom.classList.add(`${EDITOR_PREFIX}-header-indicator-border__bottom`)
+      lineBottom.style.top = `${(preY * p + headerHeight + headerTop)}px`
+      this.headerIndicatorContainer.append(lineBottom)
+
+      // 右边线
+      const lineRight = document.createElement('span')
+      lineRight.classList.add(`${EDITOR_PREFIX}-header-indicator-border__right`)
+      lineRight.style.top = `${(preY * p + headerTop)}px`
+      lineRight.style.height = `${headerHeight}px`
+      lineRight.style.left = `${(margins[3] + this.draw.getInnerWidth())}px`
+      this.headerIndicatorContainer.append(lineRight)
     }
     this.container.append(this.headerIndicatorContainer)
   }
@@ -65,5 +110,4 @@ export class Zone {
   private _clearHeaderZoneIndicator() {
     this.headerIndicatorContainer?.remove()
   }
-
-}
+}

src/main.ts

@@ -1182,4 +1182,4 @@ window.onload = function () {
     }
   ])
 
-}
+}