feat:page zoom by wheel

src/editor/core/command/Command.ts

@@ -24,6 +24,7 @@ export class Command {
   private static image: Function
   private static search: Function
   private static print: Function
+  private static pageScaleRecovery: Function
   private static pageScaleMinus: Function
   private static pageScaleAdd: Function
 
@@ -48,6 +49,7 @@ export class Command {
     Command.image = adapt.image.bind(adapt)
     Command.search = adapt.search.bind(adapt)
     Command.print = adapt.print.bind(adapt)
+    Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt)
     Command.pageScaleMinus = adapt.pageScaleMinus.bind(adapt)
     Command.pageScaleAdd = adapt.pageScaleAdd.bind(adapt)
   }
@@ -136,6 +138,10 @@ export class Command {
   }
 
   // 页面缩放
+  public executePageScaleRecovery() {
+    return Command.pageScaleRecovery()
+  }
+
   public executePageScaleMinus() {
     return Command.pageScaleMinus()
   }

src/editor/core/command/CommandAdapt.ts

@@ -268,6 +268,13 @@ export class CommandAdapt {
     }
   }
 
+  public pageScaleRecovery() {
+    const { scale } = this.options
+    if (scale !== 1) {
+      this.draw.setPageScale(1)
+    }
+  }
+
   public pageScaleMinus() {
     const { scale } = this.options
     const nextScale = scale * 10 - 1

src/editor/core/event/GlobalEvent.ts

@@ -1,4 +1,5 @@
 import { EDITOR_COMPONENT } from "../../dataset/constant/Editor"
+import { IEditorOption } from "../../interface/Editor"
 import { findParent } from "../../utils"
 import { Cursor } from "../cursor/Cursor"
 import { Draw } from "../draw/Draw"
@@ -10,6 +11,7 @@ export class GlobalEvent {
 
   private draw: Draw
   private canvas: HTMLCanvasElement
+  private options: Required<IEditorOption>
   private cursor: Cursor | null
   private canvasEvent: CanvasEvent
   private range: RangeManager
@@ -18,6 +20,7 @@ export class GlobalEvent {
   constructor(draw: Draw, canvasEvent: CanvasEvent) {
     this.draw = draw
     this.canvas = draw.getPage()
+    this.options = draw.getOptions()
     this.canvasEvent = canvasEvent
     this.cursor = null
     this.range = draw.getRange()
@@ -35,6 +38,9 @@ export class GlobalEvent {
     document.addEventListener('mouseup', () => {
       this.setDragState()
     })
+    document.addEventListener('wheel', (evt: WheelEvent) => {
+      this.setPageScale(evt)
+    }, { passive: false })
   }
 
   public recoverEffect(evt: MouseEvent) {
@@ -70,4 +76,23 @@ export class GlobalEvent {
     this.range.setRangeStyle()
   }
 
+  public setPageScale(evt: WheelEvent) {
+    if (!evt.ctrlKey) return
+    evt.preventDefault()
+    const { scale } = this.options
+    if (evt.deltaY < 0) {
+      // 放大
+      const nextScale = scale * 10 + 1
+      if (nextScale <= 30) {
+        this.draw.setPageScale(nextScale / 10)
+      }
+    } else {
+      // 缩小
+      const nextScale = scale * 10 - 1
+      if (nextScale >= 5) {
+        this.draw.setPageScale(nextScale / 10)
+      }
+    }
+  }
+
 }

src/main.ts

@@ -231,6 +231,10 @@ window.onload = function () {
     console.log('print')
     instance.command.executePrint()
   }
+  document.querySelector<HTMLDivElement>('.page-scale-percentage')!.onclick = function () {
+    console.log('page-scale-recovery')
+    instance.command.executePageScaleRecovery()
+  }
   document.querySelector<HTMLDivElement>('.page-scale-minus')!.onclick = function () {
     console.log('page-scale-minus')
     instance.command.executePageScaleMinus()

src/style.css

@@ -404,5 +404,6 @@ ul {
 }
 
 .footer .page-scale-percentage {
+  cursor: pointer;
   user-select: none;
 }