fix(painter): eraser

src/painter/index.ts

@@ -107,14 +107,17 @@ export default class Painter extends Component<IOptions> {
   }
   /** Add layer. */
   addLayer() {
-    const { width, height } = this.options
-    const layer = new Layer(width, height)
+    const layer = new Layer(this)
     this.layers.push(layer)
+    return this.layers.length - 1
   }
   /** Get active layer. */
   getActiveLayer() {
     return this.activeLayer
   }
+  activateLayer(index: number) {
+    this.activeLayer = this.layers[index]
+  }
   /** Use tool. */
   useTool(name: string) {
     const { c, $tools } = this
@@ -172,8 +175,12 @@ export default class Painter extends Component<IOptions> {
 
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     each(layers, (layer) => {
-      ctx.drawImage(layer.getCanvas(), 0, 0)
-      this.currentTool.onAfterRenderLayer(layer)
+      const canvas = this.currentTool.onRenderLayer(layer)
+      if (canvas) {
+        ctx.drawImage(canvas, 0, 0)
+      } else {
+        ctx.drawImage(layer.getCanvas(), 0, 0)
+      }
     })
   }
   private initTpl() {
@@ -323,8 +330,9 @@ export default class Painter extends Component<IOptions> {
 export class Layer {
   private canvas: HTMLCanvasElement
   private ctx: CanvasRenderingContext2D
-  constructor(width: number, height: number) {
+  constructor(painter: Painter) {
     const canvas = document.createElement('canvas')
+    const { width, height } = painter.getCanvas()
     canvas.width = width
     canvas.height = height
     this.canvas = canvas

src/painter/story.js

@@ -35,6 +35,13 @@ const def = story(
       tool: 'pencil',
     })
 
+    const ctx = painter.getActiveLayer().getContext()
+    ctx.fillStyle = '#ffffff'
+    ctx.fillRect(0, 0, width, height)
+    const idx = painter.addLayer()
+    painter.activateLayer(idx)
+    painter.renderCanvas()
+
     return painter
   },
   {

src/painter/tools/Brush.ts

@@ -3,10 +3,12 @@ import defaults from 'licia/defaults'
 import Tool from './Tool'
 import nextTick from 'licia/nextTick'
 import { CursorCircle } from './Pencil'
+import { duplicateCanvas } from '../util'
 
 export default class Brush extends Tool {
   private drawCtx: CanvasRenderingContext2D
   private drawCanvas: HTMLCanvasElement
+  private combinedCanvas: HTMLCanvasElement
   private brushCavnas: HTMLCanvasElement
   private brushCtx: CanvasRenderingContext2D
   private isDrawing = false
@@ -108,9 +110,17 @@ export default class Brush extends Tool {
     this.commitDraw(painter.getActiveLayer().getContext())
     painter.renderCanvas()
   }
-  onAfterRenderLayer(layer: Layer) {
+  onRenderLayer(layer: Layer) {
     if (layer === this.painter.getActiveLayer() && this.isDrawing) {
-      this.commitDraw(this.ctx)
+      if (!this.combinedCanvas) {
+        this.combinedCanvas = duplicateCanvas(layer.getCanvas())
+      }
+      const combinedCtx = this.combinedCanvas.getContext('2d')!
+      const { width, height } = this.combinedCanvas
+      combinedCtx.clearRect(0, 0, width, height)
+      combinedCtx.drawImage(layer.getCanvas(), 0, 0)
+      this.commitDraw(combinedCtx)
+      return this.combinedCanvas
     }
   }
   onZoom() {

src/painter/tools/Eraser.ts

@@ -44,8 +44,8 @@ export default class Eraser extends Tool {
   onDragEnd(e: any) {
     this.getTool().onDragEnd(e)
   }
-  onAfterRenderLayer(layer: Layer) {
-    this.getTool().onAfterRenderLayer(layer)
+  onRenderLayer(layer: Layer) {
+    return this.getTool().onRenderLayer(layer)
   }
   onZoom() {
     super.onZoom()

src/painter/tools/Pencil.ts

@@ -4,10 +4,12 @@ import $ from 'licia/$'
 import Zoom from './Zoom'
 import defaults from 'licia/defaults'
 import nextTick from 'licia/nextTick'
+import { duplicateCanvas } from '../util'
 
 export default class Pencil extends Tool {
   private drawCtx: CanvasRenderingContext2D
   private drawCanvas: HTMLCanvasElement
+  private combinedCanvas: HTMLCanvasElement
   private isDrawing = false
   private cursorCircle: CursorCircle
   private drawOptions: Required<IDrawOptions> = {
@@ -99,9 +101,17 @@ export default class Pencil extends Tool {
     this.commitDraw(painter.getActiveLayer().getContext())
     painter.renderCanvas()
   }
-  onAfterRenderLayer(layer: Layer) {
+  onRenderLayer(layer: Layer) {
     if (layer === this.painter.getActiveLayer() && this.isDrawing) {
-      this.commitDraw(this.ctx)
+      if (!this.combinedCanvas) {
+        this.combinedCanvas = duplicateCanvas(layer.getCanvas())
+      }
+      const combinedCtx = this.combinedCanvas.getContext('2d')!
+      const { width, height } = this.combinedCanvas
+      combinedCtx.clearRect(0, 0, width, height)
+      combinedCtx.drawImage(layer.getCanvas(), 0, 0)
+      this.commitDraw(combinedCtx)
+      return this.combinedCanvas
     }
   }
   onZoom() {

src/painter/tools/Tool.ts

@@ -113,7 +113,7 @@ export default class Tool extends Emitter {
     })
   }
   onZoom() {}
-  onAfterRenderLayer(layer: Layer) {}
+  onRenderLayer(layer: Layer): HTMLCanvasElement | void {}
   protected renderToolbar() {
     this.toolbar.clear()
   }

src/painter/util.ts

@@ -0,0 +1,12 @@
+export function duplicateCanvas(
+  canvas: HTMLCanvasElement,
+  includingContent = false
+) {
+  const result = document.createElement('canvas')
+  result.width = canvas.width
+  result.height = canvas.height
+  if (includingContent) {
+    result.getContext('2d')!.drawImage(canvas, 0, 0)
+  }
+  return result
+}