refactor: header indicator #159

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

@@ -4,7 +4,7 @@
   font-size: 12px;
   background: rgb(218 231 252);
   position: absolute;
-  transform: translate(10px, 10px);
+  transform-origin: 0 0;
 }
 
 .ce-header-indicator-border__top,
@@ -30,4 +30,4 @@
 
 .ce-header-indicator-border__right {
   border-right: 2px dashed rgb(238, 238, 238);
-}
+}

src/editor/core/draw/Draw.ts

@@ -264,10 +264,6 @@ export class Draw {
     return bottom * scale
   }
 
-  public getHeaderTop(): number {
-    return this.options.headerTop * this.options.scale
-  }
-
   public getMarginIndicatorSize(): number {
     return this.options.marginIndicatorSize * this.options.scale
   }
@@ -1363,7 +1359,7 @@ export class Draw {
         this.tableTool.render()
       }
       // 页眉指示器重新渲染
-      if (isCompute && !this.isReadonly() && this.zone.isHeaderActive()) {
+      if (isCompute && this.zone.isHeaderActive()) {
         this.zone.drawHeaderZoneIndicator()
       }
       // 页面尺寸改变
@@ -1384,4 +1380,4 @@ export class Draw {
     this.selectionObserver.removeEvent()
   }
 
-}
+}

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

@@ -11,8 +11,6 @@ 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
   }
@@ -106,4 +104,4 @@ function threeClick(host: CanvasEvent) {
 export default {
   dblclick,
   threeClick
-}
+}

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

@@ -260,9 +260,12 @@ 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)
+    // 退出页眉编辑
+    const zoneManager = draw.getZone()
+    if (zoneManager.isHeaderActive()) {
+      zoneManager.setZone(EditorZone.MAIN)
     }
     evt.preventDefault()
   } else if (evt.key === KeyMap.TAB) {
@@ -272,4 +275,4 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) {
     }])
     evt.preventDefault()
   }
-}
+}

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

@@ -62,8 +62,8 @@
     "minute": "Minute",
     "second": "Second"
   },
-  "global": {
+  "frame": {
     "header": "Header",
     "footer": "Footer"
   }
-}
+}

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

@@ -62,8 +62,8 @@
     "minute": "分",
     "second": "秒"
   },
-  "global": {
+  "frame": {
     "header": "页眉",
     "footer": "页脚"
   }
-}
+}

src/editor/core/zone/Zone.ts

@@ -5,6 +5,9 @@ import { Draw } from '../draw/Draw'
 import { I18n } from '../i18n/I18n'
 
 export class Zone {
+
+  private readonly INDICATOR_TITLE_TRANSLATE = [20, 5]
+
   private draw: Draw
   private options: Required<IEditorOption>
   private i18n: I18n
@@ -54,54 +57,56 @@ export class Zone {
   public drawHeaderZoneIndicator() {
     this._clearHeaderZoneIndicator()
     const { scale } = this.options
+    const [offsetX, offsetY] = this.INDICATOR_TITLE_TRANSLATE
     this.headerIndicatorContainer = document.createElement('div')
     this.headerIndicatorContainer.classList.add(`${EDITOR_PREFIX}-header-indicator`)
     const pageList = this.draw.getPageList()
+    const margins = this.draw.getMargins()
+    const innerWidth = this.draw.getInnerWidth()
     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()
+    const header = this.draw.getHeader()
+    const headerHeight = header.getHeight()
+    const headerTop = header.getHeaderTop()
 
     for (let p = 0; p < pageList.length; p++) {
-      const indicator = document.createElement('div')
-      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 startY = preY * p + headerTop
+      const indicatorTitle = document.createElement('div')
+      // 标题
+      indicatorTitle.innerText = this.i18n.t('frame.header')
+      indicatorTitle.style.top = `${startY + headerHeight}px`
+      indicatorTitle.style.transform = `translate(${offsetX * scale}px, ${offsetY * scale}px) scale(${scale})`
+      this.headerIndicatorContainer.append(indicatorTitle)
 
       // 上边线
       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'
+      lineTop.style.top = `${startY}px`
+      lineTop.style.width = `${innerWidth}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.top = `${startY}px`
       lineLeft.style.height = `${headerHeight}px`
-      lineLeft.style.left = margins[3] + '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`
+      lineBottom.style.top = `${startY + headerHeight}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.top = `${startY}px`
       lineRight.style.height = `${headerHeight}px`
-      lineRight.style.left = `${(margins[3] + this.draw.getInnerWidth())}px`
+      lineRight.style.left = `${margins[3] + innerWidth}px`
       this.headerIndicatorContainer.append(lineRight)
     }
     this.container.append(this.headerIndicatorContainer)
@@ -109,5 +114,6 @@ export class Zone {
 
   private _clearHeaderZoneIndicator() {
     this.headerIndicatorContainer?.remove()
+    this.headerIndicatorContainer = null
   }
-}
+}

src/editor/index.ts

@@ -100,7 +100,6 @@ export default class Editor {
       tdPadding: 5,
       defaultTdHeight: 40,
       defaultHyperlinkColor: '#0000FF',
-      headerTop: 50,
       paperDirection: PaperDirection.VERTICAL,
       inactiveAlpha: 0.6,
       ...options,

src/editor/interface/Editor.ts

@@ -46,7 +46,6 @@ export interface IEditorOption {
   tdPadding?: number;
   defaultTdHeight?: number;
   defaultHyperlinkColor?: string;
-  headerTop?: number;
   paperDirection?: PaperDirection;
   inactiveAlpha?: number;
   header?: IHeader;