feat:页码计算

src/editor/core/draw/Draw.ts

@@ -22,6 +22,7 @@ import { ElementType } from "../../dataset/enum/Element"
 import { ImageParticle } from "./particle/ImageParticle"
 import { TextParticle } from "./particle/TextParticle"
 import { PageNumber } from "./frame/PageNumber"
+import { GlobalObserver } from "../observer/GlobalObserver"
 
 export class Draw {
 
@@ -52,6 +53,8 @@ export class Draw {
   private rowList: IRow[]
   private painterStyle: IElementStyle | null
   private searchMatchList: number[][] | null
+  private visiblePageNoList: number[]
+  private intersectionPageNo: number
 
   constructor(
     container: HTMLDivElement,
@@ -82,6 +85,7 @@ export class Draw {
     this.imageParticle = new ImageParticle(this)
     this.textParticle = new TextParticle(this)
     this.pageNumber = new PageNumber(this)
+    new GlobalObserver(this)
 
     const canvasEvent = new CanvasEvent(this)
     this.cursor = new Cursor(this, canvasEvent)
@@ -94,6 +98,8 @@ export class Draw {
     this.rowList = []
     this.painterStyle = null
     this.searchMatchList = null
+    this.visiblePageNoList = []
+    this.intersectionPageNo = 0
 
     this.render({ isSetCursor: false })
   }
@@ -106,6 +112,28 @@ export class Draw {
     return this.pageContainer
   }
 
+  public getVisiblePageNoList(): number[] {
+    return this.visiblePageNoList
+  }
+
+  public setVisiblePageNoList(payload: number[]) {
+    this.visiblePageNoList = payload
+    if (this.listener.visiblePageNoListChange) {
+      this.listener.visiblePageNoListChange(this.visiblePageNoList)
+    }
+  }
+
+  public getIntersectionPageNo(): number {
+    return this.intersectionPageNo
+  }
+
+  public setIntersectionPageNo(payload: number) {
+    this.intersectionPageNo = payload
+    if (this.listener.intersectionPageNoChange) {
+      this.listener.intersectionPageNoChange(this.intersectionPageNo)
+    }
+  }
+
   public getPageNo(): number {
     return this.pageNo
   }
@@ -467,6 +495,13 @@ export class Draw {
         self.render({ curIndex, isSubmitHistory: false })
       })
     }
+
+    // 页面改变
+    setTimeout(() => {
+      if (this.listener.pageSizeChange) {
+        this.listener.pageSizeChange(pageRowList.length)
+      }
+    })
   }
 
 }

src/editor/core/listener/Listener.ts

@@ -1,11 +1,22 @@
-import { IRangeStyleChange } from "../../interface/Listener"
+import {
+  IIntersectionPageNoChange,
+  IPageSizeChange,
+  IRangeStyleChange,
+  IVisiblePageNoListChange
+} from "../../interface/Listener"
 
 export class Listener {
 
   public rangeStyleChange: IRangeStyleChange | null
+  public visiblePageNoListChange: IVisiblePageNoListChange | null
+  public intersectionPageNoChange: IIntersectionPageNoChange | null
+  public pageSizeChange: IPageSizeChange | null
 
   constructor() {
     this.rangeStyleChange = null
+    this.visiblePageNoListChange = null
+    this.intersectionPageNoChange = null
+    this.pageSizeChange = null
   }
 
 }

src/editor/core/observer/GlobalObserver.ts

@@ -0,0 +1,60 @@
+import { IEditorOption } from "../../interface/Editor"
+import { debounce } from "../../utils"
+import { Draw } from "../draw/Draw"
+
+export class GlobalObserver {
+
+  private draw: Draw
+  private options: Required<IEditorOption>
+  private pageContainer: HTMLDivElement
+  private pageHeight: number
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.pageContainer = draw.getPageContainer()
+    const { height, pageGap } = this.options
+    this.pageHeight = height + pageGap
+    // 监听滚轮
+    setTimeout(() => {
+      if (!window.scrollY) {
+        this.observer()
+      }
+    })
+    document.addEventListener('scroll', debounce(this.observer.bind(this), 150))
+  }
+
+  private observer() {
+    const rect = this.pageContainer.getBoundingClientRect()
+    const top = Math.abs(rect.top)
+    const bottom = top + window.innerHeight
+    const pageList = this.draw.getPageList()
+    // 计算显示页
+    let visiblePageNoList: number[] = []
+    let intersectionPageNo: number = 0
+    let intersectionMaxHeight: number = 0
+    for (let i = 0; i < pageList.length; i++) {
+      const curTop = i * this.pageHeight
+      const curBottom = (i + 1) * this.pageHeight
+      if (curTop > bottom) break
+      if (curBottom < top) continue
+      // 计算交叉高度
+      let intersectionHeight = 0
+      if (curTop < top && curBottom < bottom) {
+        intersectionHeight = curBottom - top
+      } else if (curTop > top && curBottom > bottom) {
+        intersectionHeight = bottom - curTop
+      } else {
+        intersectionHeight = rect.height
+      }
+      if (intersectionHeight > intersectionMaxHeight) {
+        intersectionMaxHeight = intersectionHeight
+        intersectionPageNo = i
+      }
+      visiblePageNoList.push(i)
+    }
+    this.draw.setIntersectionPageNo(intersectionPageNo)
+    this.draw.setVisiblePageNoList(visiblePageNoList)
+  }
+
+}

src/editor/dataset/enum/Editor.ts

@@ -1,4 +1,5 @@
 export enum EditorComponent {
   MENU = 'menu',
-  MAIN = 'main'
+  MAIN = 'main',
+  FOOTER = 'footer'
 }

src/editor/interface/Listener.ts

@@ -16,3 +16,9 @@ export interface IRangeStype {
 }
 
 export type IRangeStyleChange = (payload: IRangeStype) => void
+
+export type IVisiblePageNoListChange = (payload: number[]) => void
+
+export type IIntersectionPageNoChange = (payload: number) => void
+
+export type IPageSizeChange = (payload: number) => void