feat: 同步滚动开关

blossom-editor · Jan 18, 2024 · c39640a · c39640a
1 parent 2c39c67
commit c39640a
Showing 1 changed file with 44 additions and 3 deletions.
diff --git a/blossom-editor/src/renderer/src/views/article/scripts/editor-preview-scroll.ts b/blossom-editor/src/renderer/src/views/article/scripts/editor-preview-scroll.ts
@@ -27,6 +27,10 @@ export class EPScroll {
    * 保存编辑器滚动条的最后位置
    */
   private _scrollTop: number = 0
+  /**
+   * 是否启用同步刷新
+   */
+  private _open: boolean = true
 
   constructor(editor: HTMLElement, previre: HTMLElement, cmw: CmWrapper | undefined) {
     this._editor = editor
@@ -35,26 +39,63 @@ export class EPScroll {
     this._scrollTop = 0
   }
 
+  /**
+   * 返回滚动条位置
+   */
   public get scrollTop() {
     return this._scrollTop
   }
 
+  /**
+   * 重置滚动条
+   */
   public scrollTopReset() {
     this._scrollTop = 0
-    this._editor.scrollTo({ top: 0 })
+    this.toTop()
   }
 
+  /**
+   * 滚动到最近一次
+   */
   public scrollTopLast() {
     this._editor.scrollTo({ top: this._scrollTop })
   }
 
-  public sycnScroll(_event: Event | string, _source?: string, _lineno?: number, _colno?: number, _error?: Error): any {
+  /**
+   * 编辑器滚动条置顶
+   */
+  public toTop() {
+    this._editor.scrollTo({ top: 0 })
+  }
+
+  /**
+   * 编辑器滚动条置底
+   */
+  public toBottom() {
+    this._editor.scrollTo({ top: 999999999 })
+  }
+
+  /**
+   * 切换同步滚动开启/关闭
+   * @returns 是否同步滚动
+   */
+  public open(): boolean {
+    this._open = !this._open
+    return this._open
+  }
+
+  public sycnScroll(_event: Event | string, _source?: string, _lineno?: number, _colno?: number, _error?: Error): void {
     if (this._editor == undefined) {
       return
     }
     // console.log(this._editor?.scrollHeight, this._editor?.clientHeight, this._editor?.scrollTop)
 
     this._scrollTop = this._editor.scrollTop
+
+    // 如果不开启同步滚动, 则返回
+    if (!this._open) {
+      return
+    }
     // 如果在头部附近
     if (this._editor.scrollTop < 5) {
       this._preview.scrollTo({ top: 0 })
@@ -84,7 +125,7 @@ export class EPScroll {
 
         // 将不可见的的 html 转换为 dom 对象, 是一个从 <html> 标签开始的 dom 对象
         const invisibleDomAll = new DOMParser().parseFromString(invisibleHtml, 'text/html')
-        
+
         // body 下的内容才是由 markdown 转换而来的, 不可见内容转换的 dom 集合
         const editorDoms = invisibleDomAll.body.querySelectorAll(matchHtmlTags)
         // 预览页面的 dom 集合