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