From c445ef47ddeb1680132eee98bdb3018735825c24 Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Fri, 16 Feb 2024 07:58:22 +0800
Subject: [PATCH] feat(painter): zoom cursor

---
 src/painter/style.scss           |  5 +++++
 src/painter/tools/PaintBucket.ts |  4 ++--
 src/painter/tools/Tool.ts        |  3 +++
 src/painter/tools/Zoom.ts        | 32 ++++++++++++++++++++++++++++----
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/painter/style.scss b/src/painter/style.scss
index 1fda4fa..7954295 100644
--- a/src/painter/style.scss
+++ b/src/painter/style.scss
@@ -134,6 +134,11 @@
   opacity: 0;
   left: 0;
   top: 0;
+  .icon {
+    color: #000;
+    text-shadow: -1px -1px 0 $color-white, 1px -1px 0 $color-white,
+      -1px 1px 0 $color-white, 1px 1px 0 $color-white;
+  }
 }
 
 .body {
diff --git a/src/painter/tools/PaintBucket.ts b/src/painter/tools/PaintBucket.ts
index 2db1849..925a2c1 100644
--- a/src/painter/tools/PaintBucket.ts
+++ b/src/painter/tools/PaintBucket.ts
@@ -14,8 +14,8 @@ export default class PaintBucket extends Tool {
     this.$cursor.html(painter.c(`<span class="icon icon-paint-bucket"></span>`))
     this.$cursor.find(painter.c('.icon-paint-bucket')).css({
       position: 'relative',
-      left: 0,
-      top: 0,
+      left: -7,
+      top: -3,
     })
   }
   onClick(e: any) {
diff --git a/src/painter/tools/Tool.ts b/src/painter/tools/Tool.ts
index aafc30e..6d3cdcd 100644
--- a/src/painter/tools/Tool.ts
+++ b/src/painter/tools/Tool.ts
@@ -22,6 +22,7 @@ export default class Tool {
   protected cursor: HTMLDivElement
   protected toolbar: LunaToolbar
   protected options: types.PlainObj<any> = {}
+  protected isUsing = false
   constructor(painter: Painter) {
     this.painter = painter
 
@@ -64,12 +65,14 @@ export default class Tool {
     this.getXY(e)
   }
   onUse() {
+    this.isUsing = true
     this.renderToolbar()
 
     this.$toolbar.append(this.toolbar.container)
     this.$viewportOverlay.append(this.cursor)
   }
   onUnuse() {
+    this.isUsing = false
     this.toolbar.$container.remove()
     this.$cursor.remove()
   }
diff --git a/src/painter/tools/Zoom.ts b/src/painter/tools/Zoom.ts
index f30a194..1325f11 100644
--- a/src/painter/tools/Zoom.ts
+++ b/src/painter/tools/Zoom.ts
@@ -10,6 +10,7 @@ interface IPivot {
 
 export default class Zoom extends Tool {
   private isZooming = false
+  private isAltDown = false
   constructor(painter: Painter) {
     super(painter)
 
@@ -17,6 +18,8 @@ export default class Zoom extends Tool {
       mode: 'in',
     }
 
+    this.$cursor.html(painter.c(`<span class="icon icon-zoom-in"></span>`))
+
     this.bindEvent()
   }
   onUse() {
@@ -35,10 +38,7 @@ export default class Zoom extends Tool {
   onClick(e: any) {
     const offset = this.$viewport.offset()
 
-    let ratio = this.options.mode === 'in' ? 0.3 : -0.3
-    if (e.altKey) {
-      ratio = -ratio
-    }
+    const ratio = this.options.mode === 'in' ? 0.3 : -0.3
     this.zoom(ratio, {
       x: eventPage('x', e) - offset.left,
       y: eventPage('y', e) - offset.top,
@@ -122,6 +122,15 @@ export default class Zoom extends Tool {
       )
       .play()
   }
+  setOption(name: string, val: any) {
+    super.setOption(name, val)
+    if (name === 'mode') {
+      const { c } = this.painter
+      const $icon = this.$cursor.find(c('.icon'))
+      $icon.rmClass(c('icon-zoom-in')).rmClass(c('icon-zoom-out'))
+      $icon.addClass(c(`icon-zoom-${val}`))
+    }
+  }
   protected renderToolbar() {
     super.renderToolbar()
 
@@ -155,6 +164,21 @@ export default class Zoom extends Tool {
   }
   private bindEvent() {
     this.$viewport.on('wheel', this.onWheel)
+    document.addEventListener('keydown', (e: any) => {
+      if (e.altKey && this.isUsing) {
+        this.isAltDown = true
+        this.toggleMode()
+      }
+    })
+    document.addEventListener('keyup', () => {
+      if (this.isAltDown) {
+        this.isAltDown = false
+        this.toggleMode()
+      }
+    })
+  }
+  private toggleMode = () => {
+    this.setOption('mode', this.options.mode === 'in' ? 'out' : 'in')
   }
   private onWheel = (e: any) => {
     e = e.origEvent