feat(painter): zoom cursor

liriliri · Feb 15, 2024 · c445ef4 · c445ef4
1 parent de5fe6f
commit c445ef4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -10,13 +10,16 @@ interface IPivot {
 
 export default class Zoom extends Tool {
   private isZooming = false
+  private isAltDown = false
   constructor(painter: Painter) {
     super(painter)
 
     this.options = {
       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