From 86707cad47381e8f807aece3ffc76e34f8cffa24 Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Sun, 19 Mar 2023 16:23:05 +0800
Subject: [PATCH] feat:add header indicator

---
 src/editor/assets/css/index.css     |  1 +
 src/editor/assets/css/zone/zone.css |  8 ++++++++
 src/editor/core/zone/Zone.ts        | 32 +++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 src/editor/assets/css/zone/zone.css

diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css
index 0192535..781e8df 100644
--- a/src/editor/assets/css/index.css
+++ b/src/editor/assets/css/index.css
@@ -6,6 +6,7 @@
 @import './previewer/previewer.css';
 @import './contextmenu/contextmenu.css';
 @import './hyperlink/hyperlink.css';
+@import './zone/zone.css';
 
 .ce-inputarea {
   width: 0;
diff --git a/src/editor/assets/css/zone/zone.css b/src/editor/assets/css/zone/zone.css
new file mode 100644
index 0000000..7cb72f3
--- /dev/null
+++ b/src/editor/assets/css/zone/zone.css
@@ -0,0 +1,8 @@
+.ce-header-indicator>div {
+  padding: 3px 6px;
+  color: #000000;
+  font-size: 12px;
+  background: rgb(218 231 252);
+  position: absolute;
+  transform: translate(10px, 10px);
+}
\ No newline at end of file
diff --git a/src/editor/core/zone/Zone.ts b/src/editor/core/zone/Zone.ts
index 7b38161..f4c3019 100644
--- a/src/editor/core/zone/Zone.ts
+++ b/src/editor/core/zone/Zone.ts
@@ -1,14 +1,20 @@
+import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
 import { EditorZone } from '../../dataset/enum/Editor'
 import { Draw } from '../draw/Draw'
 
 export class Zone {
 
   private draw: Draw
+  private container: HTMLDivElement
+
   private currentZone: EditorZone
+  private headerIndicatorContainer: HTMLDivElement | null
 
   constructor(draw: Draw) {
     this.draw = draw
+    this.container = draw.getContainer()
     this.currentZone = EditorZone.MAIN
+    this.headerIndicatorContainer = null
   }
 
   public isHeaderActive(): boolean {
@@ -32,6 +38,32 @@ export class Zone {
       isSetCursor: false,
       isCompute: false
     })
+    // 页眉指示器
+    if (this.isHeaderActive()) {
+      this._drawHeaderZoneIndicator()
+    } else {
+      this._clearHeaderZoneIndicator()
+    }
+  }
+
+  private _drawHeaderZoneIndicator() {
+    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
+    for (let p = 0; p < pageList.length; p++) {
+      const indicator = document.createElement('div')
+      indicator.innerText = `编辑页眉`
+      indicator.style.top = `${preY * p}px`
+      this.headerIndicatorContainer.append(indicator)
+    }
+    this.container.append(this.headerIndicatorContainer)
+  }
+
+  private _clearHeaderZoneIndicator() {
+    this.headerIndicatorContainer?.remove()
   }
 
 }
\ No newline at end of file