From 5869d1b3e911df3f6e8205184186767a5b5adf1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= <huangyunfeihufe@hotmail.com>
Date: Wed, 1 Dec 2021 20:02:18 +0800
Subject: [PATCH] feat:page zoom by wheel

---
 src/editor/core/command/Command.ts      |  6 ++++++
 src/editor/core/command/CommandAdapt.ts |  7 +++++++
 src/editor/core/event/GlobalEvent.ts    | 25 +++++++++++++++++++++++++
 src/main.ts                             |  4 ++++
 src/style.css                           |  1 +
 5 files changed, 43 insertions(+)

diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts
index 88bcfb5..cd9cf3e 100644
--- a/src/editor/core/command/Command.ts
+++ b/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()
   }
diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts
index b11bcdf..6c4040a 100644
--- a/src/editor/core/command/CommandAdapt.ts
+++ b/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
diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts
index 4752406..f364126 100644
--- a/src/editor/core/event/GlobalEvent.ts
+++ b/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)
+      }
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index dab40e8..b8e9d3a 100644
--- a/src/main.ts
+++ b/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()
diff --git a/src/style.css b/src/style.css
index 328832e..4b5ed6a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -404,5 +404,6 @@ ul {
 }
 
 .footer .page-scale-percentage {
+  cursor: pointer;
   user-select: none;
 }
\ No newline at end of file