feat(painter): zoom

src/image-viewer/index.ts

@@ -105,14 +105,17 @@ export default class ImageViewer extends Component<IOptions> {
 
  imageData.width = newWidth
  imageData.height = newHeight
- if (pivot) {
-  imageData.left -= offsetWidth * ((pivot.x - imageData.left) / width)
- imageData.top -= offsetHeight * ((pivot.y - imageData.top) / height)
- } else {
- imageData.left -= offsetWidth / 2
- imageData.top -= offsetHeight / 2
+
+ if (!pivot) {
+ pivot = {
+  x: width / 2 + imageData.left,
+  y: height / 2 + imageData.top,
+ }
  }
 
+ imageData.left -= offsetWidth * ((pivot.x - imageData.left) / width)
+ imageData.top -= offsetHeight * ((pivot.y - imageData.top) / height)
+
  this.render()
  }
  /** Reset image to initial state. */

src/painter/index.ts

@@ -29,7 +29,6 @@ export default class Painter extends Component<IOptions> {
  private $tools: $.$
  private $canvas: $.$
  private $viewport: $.$
- private viewport: HTMLDivElement
  private $body: $.$
  private canvas: HTMLCanvasElement
  private ctx: CanvasRenderingContext2D
@@ -56,17 +55,13 @@ export default class Painter extends Component<IOptions> {
  this.$tools = this.find('.tools')
  this.$canvas = this.find('.main-canvas')
  this.$viewport = this.find('.viewport')
- this.viewport = this.$viewport.get(0) as HTMLDivElement
  this.$body = this.find('.body')
  this.canvas = this.$canvas.get(0) as HTMLCanvasElement
  this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D
 
  this.resizeSensor = new ResizeSensor(container)
  this.canvasResizeSenor = new ResizeSensor(this.canvas)
 
- this.resetViewport()
- this.centerCanvas()
-
  this.addLayer()
  this.activeLayer = this.layers[0]
 
@@ -77,6 +72,9 @@ export default class Painter extends Component<IOptions> {
  this.hand = new Hand(this)
  this.zoom = new Zoom(this)
 
+ this.resetViewport()
+ this.hand.centerCanvas()
+
  this.useTool(this.options.tool)
  }
  destroy() {
@@ -102,6 +100,7 @@ export default class Painter extends Component<IOptions> {
 
  if (tool) {
  this.currentTool = tool
+ tool.onUse()
  $tools.find(c('.tool')).rmClass(c('selected'))
  $tools.find(`${c('.tool')}[data-tool="${name}"]`).addClass(c('selected'))
  }
@@ -200,7 +199,7 @@ export default class Painter extends Component<IOptions> {
  const { width: viewportWidth, height: viewportHeight } =
  this.getViewportSize()
  if (canvasWidth < viewportWidth && canvasHeight < viewportHeight) {
- this.centerCanvas()
+ this.hand.centerCanvas()
  }
  }
  private resetViewport = () => {
@@ -216,14 +215,7 @@ export default class Painter extends Component<IOptions> {
  height,
  })
  }
- private centerCanvas() {
- const { viewport } = this
- const { width: viewportWidth, height: viewportHeight } =
- this.getViewportSize()
- viewport.scrollLeft = (viewport.scrollWidth - viewportWidth) / 2
- viewport.scrollTop = (viewport.scrollHeight - viewportHeight) / 2
- }
- private getViewportSize() {
+ getViewportSize() {
  let { width, height } = this.$viewport.offset()
  const scrollbarSize = measuredScrollbarWidth()
  width -= scrollbarSize

src/painter/style.scss

@@ -61,7 +61,7 @@
 }
 
 .main-canvas {
- transition: width 0.3s, height 0.3s;
+ image-rendering: pixelated;
 }
 
 .theme-dark {

src/painter/tools.ts

@@ -1,6 +1,7 @@
 import Painter from './index'
 import $ from 'licia/$'
 import types from 'licia/types'
+import Tween from 'licia/Tween'
 import { eventPage, eventClient } from '../share/util'
 
 interface IPivot {
@@ -40,11 +41,13 @@ export class Tool {
  onDragEnd(e: any) {
  this.getXY(e)
  }
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ onUse() {}
  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
  onClick(e: any) {}
  private getXY(e: any) {
- const canvas = this.painter.getCanvas()
- const offset = $(canvas).offset()
+ const { canvas, $canvas } = this
+ const offset = $canvas.offset()
  const pageX = eventPage('x', e)
  const pageY = eventPage('y', e)
 
@@ -97,7 +100,8 @@ export class Pencil extends Tool {
 
  const { ctx } = this
  const { size } = this.options
- ctx.fillStyle = 'black'
+ const color = 'rgb(0,0,0)'
+ ctx.fillStyle = color
  ctx.fillRect(x, y, size, size)
  this.painter.updateCanvas()
  }
@@ -124,13 +128,37 @@ export class Hand extends Tool {
  viewport.scrollLeft = this.startScrollLeft - deltaX
  viewport.scrollTop = this.startScrollTop - deltaY
  }
+ centerCanvas() {
+ const { viewport } = this
+ const { width: viewportWidth, height: viewportHeight } =
+ this.painter.getViewportSize()
+ viewport.scrollLeft = (viewport.scrollWidth - viewportWidth) / 2
+ viewport.scrollTop = (viewport.scrollHeight - viewportHeight) / 2
+ }
 }
 
 export class Zoom extends Tool {
+ private isZooming = false
+ constructor(painter: Painter) {
+ super(painter)
+
+ this.bindEvent()
+ }
+ onUse() {
+ const { $canvas } = this
+
+ if (!$canvas.attr('style')) {
+ const { width, height } = $canvas.offset()
+ $canvas.css({
+ width,
+ height,
+ })
+ }
+ }
  onClick(e: any) {
  const offset = this.$viewport.offset()
 
- this.zoom(e.altKey ? -0.1 : 0.1, {
+ this.zoom(e.altKey ? -0.3 : 0.3, {
  x: eventPage('x', e) - offset.left,
  y: eventPage('y', e) - offset.top,
  })
@@ -141,14 +169,97 @@ export class Zoom extends Tool {
  this.zoomTo((offset.width * ratio) / this.canvas.width, pivot)
  }
  zoomTo(ratio: number, pivot?: IPivot) {
- const { canvas } = this
+ if (this.isZooming) {
+ return
+ }
+ this.isZooming = true
+
+ const { canvas, viewport, $canvas } = this
 
- const width = canvas.width * ratio
- const height = canvas.height * ratio
+ const newWidth = canvas.width * ratio
+ const newHeight = canvas.height * ratio
+ const offset = this.$canvas.offset()
+ const { width, height } = offset
+ let { left, top } = offset
+ const deltaWidth = newWidth - width
+ const deltaHeight = newHeight - height
+ const { scrollLeft, scrollTop } = viewport
+ const viewportOffset = this.$viewport.offset()
+ left -= viewportOffset.left
+ top -= viewportOffset.top
+ const { scrollWidth, scrollHeight } = viewport
+ const marginLeft = (scrollWidth - width) / 2
+ const marginTop = (scrollHeight - height) / 2
+
+ if (!pivot) {
+ pivot = {
+ x: width / 2 + left,
+ y: height / 2 + top,
+ }
+ }
 
- this.$canvas.css({
+ const { width: viewportWidth, height: viewportHeight } =
+ this.painter.getViewportSize()
+ const newMarginLeft = viewportWidth - Math.min(newWidth, 100)
+ const newMarginTop = viewportHeight - Math.min(newHeight, 100)
+ const deltaMarginLeft = newMarginLeft - marginLeft
+ const deltaMarginTop = newMarginTop - marginTop
+
+ const newScrollLeft =
+ scrollLeft + deltaMarginLeft + deltaWidth * ((pivot.x - left) / width)
+ const newScrollTop =
+ scrollTop + deltaMarginTop + deltaHeight * ((pivot.y - top) / height)
+
+ const tween = new Tween({
+ scrollLeft,
+ scrollTop,
  width,
  height,
  })
+
+ tween
+ .on('update', (target) => {
+ $canvas.css({
+ width: target.width,
+ height: target.height,
+ })
+ viewport.scrollLeft = target.scrollLeft
+ viewport.scrollTop = target.scrollTop
+ })
+ .on('end', () => {
+ this.isZooming = false
+ })
+
+ tween
+ .to(
+ {
+ scrollLeft: newScrollLeft,
+ scrollTop: newScrollTop,
+ width: newWidth,
+ height: newHeight,
+ },
+ 300,
+ 'linear'
+ )
+ .play()
+ }
+ private bindEvent() {
+ this.$viewport.on('wheel', this.onWheel)
+ }
+ private onWheel = (e: any) => {
+ e.preventDefault()
+
+ e = e.origEvent
+ if (!e.altKey) {
+ return
+ }
+
+ const delta = e.deltaY > 0 ? 1 : -1
+
+ const offset = this.$viewport.offset()
+ this.zoom(-delta * 0.5, {
+ x: eventPage('x', e) - offset.left,
+ y: eventPage('y', e) - offset.top,
+ })
  }
 }