chore(painter): small changes

src/painter/index.ts

@@ -3,7 +3,7 @@ import stripIndent from 'licia/stripIndent'
 import $ from 'licia/$'
 import each from 'licia/each'
 import ResizeSensor from 'licia/ResizeSensor'
-import { exportCjs, drag, measuredScrollbarWidth } from '../share/util'
+import { exportCjs, drag } from '../share/util'
 import { Brush, Pencil, Hand, Zoom, Tool } from './tools'
 
 const $document = $(document as any)
@@ -30,6 +30,7 @@ export default class Painter extends Component<IOptions> {
   private $canvas: $.$
   private $viewport: $.$
   private $body: $.$
+  private viewport: HTMLDivElement
   private canvas: HTMLCanvasElement
   private ctx: CanvasRenderingContext2D
   private layers: Layer[] = []
@@ -55,6 +56,7 @@ 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
@@ -194,37 +196,27 @@ export default class Painter extends Component<IOptions> {
   private onResize = () => {
     this.resetViewport()
 
-    const { $canvas } = this
+    const { $canvas, viewport } = this
     const { width: canvasWidth, height: canvasHeight } = $canvas.offset()
-    const { width: viewportWidth, height: viewportHeight } =
-      this.getViewportSize()
-    if (canvasWidth < viewportWidth && canvasHeight < viewportHeight) {
+    if (
+      canvasWidth < viewport.clientWidth &&
+      canvasHeight < viewport.clientHeight
+    ) {
       this.hand.centerCanvas()
     }
   }
   private resetViewport = () => {
-    const { $body, $canvas } = this
+    const { $body, $canvas, viewport } = this
     const { width: canvasWidth, height: canvasHeight } = $canvas.offset()
-    const { width: viewportWidth, height: viewportHeight } =
-      this.getViewportSize()
-    const width = (viewportWidth - Math.min(canvasWidth, 100)) * 2 + canvasWidth
+    const width =
+      (viewport.clientWidth - Math.min(canvasWidth, 100)) * 2 + canvasWidth
     const height =
-      (viewportHeight - Math.min(canvasHeight, 100)) * 2 + canvasHeight
+      (viewport.clientHeight - Math.min(canvasHeight, 100)) * 2 + canvasHeight
     $body.css({
       width,
       height,
     })
   }
-  getViewportSize() {
-    let { width, height } = this.$viewport.offset()
-    const scrollbarSize = measuredScrollbarWidth()
-    width -= scrollbarSize
-    height -= scrollbarSize
-    return {
-      width,
-      height,
-    }
-  }
 }
 
 class Layer {

src/painter/tools/Brush.ts

@@ -0,0 +1,3 @@
+import Tool from './Tool'
+
+export default class Brush extends Tool {}

src/painter/tools/Hand.ts

@@ -0,0 +1,30 @@
+import Tool from './Tool'
+import { eventClient } from '../../share/util'
+
+export default class Hand extends Tool {
+  private startX = 0
+  private startY = 0
+  private startScrollLeft = 0
+  private startScrollTop = 0
+  onDragStart(e: any) {
+    const { viewport } = this
+
+    this.startX = eventClient('x', e)
+    this.startY = eventClient('y', e)
+    this.startScrollLeft = viewport.scrollLeft
+    this.startScrollTop = viewport.scrollTop
+  }
+  onDragMove(e: any) {
+    const { viewport } = this
+
+    const deltaX = eventClient('x', e) - this.startX
+    const deltaY = eventClient('y', e) - this.startY
+    viewport.scrollLeft = this.startScrollLeft - deltaX
+    viewport.scrollTop = this.startScrollTop - deltaY
+  }
+  centerCanvas() {
+    const { viewport } = this
+    viewport.scrollLeft = (viewport.scrollWidth - viewport.clientWidth) / 2
+    viewport.scrollTop = (viewport.scrollHeight - viewport.clientHeight) / 2
+  }
+}