feat(painter): brush cursor

src/painter/icon.css

@@ -1,6 +1,6 @@
 @font-face {
  font-family: 'luna-painter-icon';
- src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAiQAAsAAAAADegAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAL0AAAEsJb0pWk9TLzIAAAHIAAAAQAAAAFZLyUlJY21hcAAAAggAAAElAAADPhTycVRnbHlmAAADMAAAAuMAAARAp2VqGGhlYWQAAAYUAAAANAAAADZzrb5AaGhlYQAABkgAAAAeAAAAJAGRAOdobXR4AAAGaAAAABkAAAB8B9H//WxvY2EAAAaEAAAAIQAAAEAacBuIbWF4cAAABqgAAAAfAAAAIAEtAEluYW1lAAAGyAAAASkAAAIWm5e+CnBvc3QAAAf0AAAAmQAAANgGS5KleJxNjs0OATEUhb/6m2EG9TeGIhZWVp5ALMRKrCxtZiWSiZXH8VAeyWmFaHPbfvfcnnsxQIsNWyr7w/FMpywed6bU+Cyv/79NebsWxF+SVgt3rHgRMWTFjhMX7jyDbqiT0qZDN3CDBCuyZIzJcermVOG1SDGjJxdPVUWPPoNAFf1Mxf5nGmiprM+MVOO9EnXJmQTnunSrfC51KqdY55qmbqe9ULVTdSaOfhnv05Lnh42URP5+bquJ5m9G0A5aAAAAeJxjYGRwZJzAwMrAwFDH0AMkZaB0AgMngzEDAxMDKzMDVhCQ5prCcIBB9yMXwwkgV4jhNAMLkGYEyQEAaFgIoHiczdLbTsJAEMbxf6GcyrmcQbnkCh4KlUSCB4ISDM/hA3nl+/QJ8Jvu3BgTE++c5NdJp9vubHeBElCUpcQQfRJh8aFqlNeLJHk95l33KR1VCqzYsGXPkRPnLLlc9GzFmnt2HPJalNe+R6T3U6ZcsdCXl/msI7rUGdPTl9sMmOj5XKNm9GnQYkhT46/1bkEzx+q4TIUqtbyv8o85fo/RH8dbdOvjXgfa6m06T2dqqzW0ntTUv4iGXaI3v5tjOxHYateuKzeuLrduLHeuJxunFWs3g7Zs3UB2biIPbiqPznp4cqk8u5nsXV8Ozlbw4lry6oZydE05Of17zk6bkEWBndisEGC5GNgJz+LATnlWCuz0Z+UAy5UAy9UAy7UAy0lA8gWi2zmpAAAAeJyNk0Fv0zAUgP0cx04TN1naNG5p0kK7JtrWbWraNBulq4Y0JBASgmknhMQBblwQcAGEtBu3XcZPQOLAFSHQEEJCMMRfQoyXbExwgry8l+fn5/izn00oIUc/yDeUMmkTkgneWYVoNINx4nvChngD4jTaoL5qgce/blFG60BvUsbuelld2pomXKVKXIgPtyltUB0uA9Nf1oyyVitTWa9wbvJK1SX40NyQA/KOCCIJmUEs1DBdgjhT4vHFycPRkzveQr+/MN2cPEpl7hECR0fFmEOyjnSjqMND5OhEUzj2Y7ReG1owgWQDfkf/zMj99L5hCqYzYYk6K5f0vjznGpWz1dMo07UDXQj9Bi6MbumGod/zdbPMFmUZ067ngf5p11buIZVWrOcLyjxJyHnkGydtKIyvUGyI0gh3cgbFrq4ArjgaKaF8z4E8IlR2wp81ucOrJa3MrlGwAIRlANV0gFvMYpsM2HKNXzLOUADKaePC5s1nlGnU4x+5XjF1dpVSx7EsEDrVOGf6tsZmODCr6nOmiUWhQGn98uz6NmiMVg2kZgX7IQrDaljEyWtfG2YiVSnWYwZK7O+P9g968oosy548fDHcf97rJdjsoZzU8j2KhieHZGm3plCHtS7avd3Xob3jrO/uLj1wduwQM6HI/0w+kQpmx6MVWIJUqDRL/BC6KnsFbkNOhsnAkK3xYC2rNOxGstoEyxgMBqd7/Ya8JU2ySi7gP7rpaAk6OBjVm0ANNZnCEHWk8NSuUJu26DhTPs4R29jewDZ/qkBCHfCVoOg4lMIMoig0zaA77wS0BMtWu+0bhl/Y+02AJmaefG4Eznw3MM0wigJTyBCg1LV+56L9i9PC+9TPOY/5/sU1BZj+mwch/o+DHv0s6vuduKSFFL4SMY+jeAWK6fICdGzwWvmt2YuqlbV2J6hYXAa9Xttltht2AtcNOqF7Jaq6azVDqLmo17SEihYDN3SxP5ybC8kva6h8LgB4nGNgZGBgAOLeVMb58fw2Xxm4GU4ABaI4H+9rgNH///3/w3CS4TRQJQcDE5BkAAB08A6neJxjYGRgYDjBAAIn/v/7/5/hJAMjAyqQBwCUsQZ2AAB4nGNgAIITMPz/P4KNjv//Y6AyAACR+QvMAAAAeJxjYAACM4YAhnkMfxhlGE0YQxhXML5hUiAWAgAUewcoAAAAeJxjYGRgYJBnsGVgYQABJiDmAkIGhv9gPgMAEeABdwB4nGWQPW7CQBSEx2BIAlKCFCkps1UKIpmfkgNAT0GXwpi1MbK91npBossJcoQcIaeIcoIcKGPzaGAtP38zb97uygAG+IWHenm4bWq9WrihOnGb9CDsk5+FO+jjRbhLfyjcwxumwn084p07eP4dnQFK4Rbu8SHcpv8p7JO/hDt4wrdwl/6PcA8r/An38eoN08gUsSncUif7LLRnef6utK1SU6hJMD5bC11oGzq9Ueujqg7J1LlYxdbkas6uzjKjSmt2OnLB1rlyNhrF4geRyZEigkGBuKkOS2gk2CNDCHvVvdQrpi0q+rVWmCDA+Cq1YKpokiGVxobJNY6sFQ48bUrXMa34Ws7kpLnMat4kIyv+77q3oxPRD7BtpkrMMOITX+SD5g75Pz0RXqgAAAB4nF3GWQ6CMAAA0Q4CbrjvuxfgUAWbQMSWtCUknt6o8cf5eSMC8e3nfxcCOoRExHTp0WfAkIQRYyZMmTFnwZIVazZs2bHnwJETZy5cRZTZxhWxstIpGxZS35JaltqnWZPflY9rpfOyGlrllE9zUxkbulbW3acxj7TUvY+m8eF7yLA0OAoUEs2NmhJPSs6dCkPLk4cQL8LFJmsAAAA=')
+ src: url('data:application/x-font-woff;charset=utf-8;base64,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')
  format('woff');
 }
 
@@ -17,30 +17,33 @@
 .icon-brush:before {
  content: '\f101';
 }
-.icon-eraser:before {
+.icon-crosshair:before {
  content: '\f102';
 }
-.icon-hand:before {
+.icon-eraser:before {
  content: '\f103';
 }
-.icon-paint-bucket:before {
+.icon-hand:before {
  content: '\f104';
 }
-.icon-pencil:before {
+.icon-paint-bucket:before {
  content: '\f105';
 }
-.icon-reset-color:before {
+.icon-pencil:before {
  content: '\f106';
 }
-.icon-swap:before {
+.icon-reset-color:before {
  content: '\f107';
 }
-.icon-zoom-in:before {
+.icon-swap:before {
  content: '\f108';
 }
-.icon-zoom-out:before {
+.icon-zoom-in:before {
  content: '\f109';
 }
-.icon-zoom:before {
+.icon-zoom-out:before {
  content: '\f10a';
 }
+.icon-zoom:before {
+ content: '\f10b';
+}

src/painter/index.ts

@@ -43,7 +43,6 @@ export default class Painter extends Component<IOptions> {
  private eraser: Eraser
  private activeLayer: Layer
  private resizeSensor: ResizeSensor
- private canvasResizeSenor: ResizeSensor
  private $foregroundColor: $.$
  private $backgroundColor: $.$
  constructor(container: HTMLElement, options: IOptions = {}) {
@@ -72,20 +71,19 @@ export default class Painter extends Component<IOptions> {
  this.ctx = this.canvas.getContext('2d')!
 
  this.resizeSensor = new ResizeSensor(container)
- this.canvasResizeSenor = new ResizeSensor(this.canvas)
 
  this.addLayer()
  this.activeLayer = this.layers[0]
 
- this.bindEvent()
-
  this.brush = new Brush(this)
  this.pencil = new Pencil(this)
  this.hand = new Hand(this)
  this.zoom = new Zoom(this)
  this.paintBucket = new PaintBucket(this)
  this.eraser = new Eraser(this)
 
+ this.bindEvent()
+
  this.resetViewport()
  this.hand.centerCanvas()
 
@@ -94,7 +92,6 @@ export default class Painter extends Component<IOptions> {
  destroy() {
  super.destroy()
  this.resizeSensor.destroy()
- this.canvasResizeSenor.destroy()
  }
  /** Add layer. */
  addLayer() {
@@ -239,7 +236,11 @@ export default class Painter extends Component<IOptions> {
  })
 
  this.resizeSensor.addListener(this.onResize)
- this.canvasResizeSenor.addListener(this.resetViewport)
+
+ this.zoom.on('change', () => {
+ this.currentTool.onZoom()
+ this.resetViewport()
+ })
  }
  private onViewportMouseEnter = (e: any) => {
  this.currentTool.onMouseEnter(e.origEvent)

src/painter/style.scss

@@ -134,6 +134,7 @@
  opacity: 0;
  left: 0;
  top: 0;
+ transform: translate(-50%, -50%);
  .icon {
  color: #000;
  text-shadow: -1px -1px 0 $color-white, 1px -1px 0 $color-white,

src/painter/tools/Brush.ts

@@ -2,13 +2,15 @@ import Painter, { Layer } from '../'
 import defaults from 'licia/defaults'
 import Tool from './Tool'
 import nextTick from 'licia/nextTick'
+import { CursorCircle } from './Pencil'
 
 export default class Brush extends Tool {
  private drawCtx: CanvasRenderingContext2D
  private drawCanvas: HTMLCanvasElement
  private brushCavnas: HTMLCanvasElement
  private brushCtx: CanvasRenderingContext2D
  private isDrawing = false
+ private cursorCircle: CursorCircle
  private drawOptions: Required<IDrawOptions> = {
  color: 'rgb(0,0,0)',
  size: 4,
@@ -24,12 +26,24 @@ export default class Brush extends Tool {
  hardness: 100,
  }
 
+ this.cursorCircle = new CursorCircle(
+ this.cursor,
+ painter,
+ this.options.size
+ )
+
  this.drawCanvas = document.createElement('canvas')
  this.drawCtx = this.drawCanvas.getContext('2d')!
 
  this.brushCavnas = document.createElement('canvas')
  this.brushCtx = this.brushCavnas.getContext('2d')!
  }
+ setOption(name: string, val: any, renderToolbar?: boolean) {
+ super.setOption(name, val, renderToolbar)
+ if (name === 'size') {
+ this.cursorCircle.setSize(val)
+ }
+ }
  onDragStart(e: any, drawOptions: IDrawOptions = {}) {
  super.onDragStart(e)
 
@@ -95,17 +109,20 @@ export default class Brush extends Tool {
  this.commitDraw(this.ctx)
  }
  }
+ onZoom() {
+ this.cursorCircle.render()
+ }
  private draw(x: number, y: number) {
  const { canvas, drawCtx } = this
- const { size } = this.options
+ const { size } = this.drawOptions
 
  if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
  return
  }
 
- const centerX = size > 1 ? x - Math.floor((size - 1) / 2) : x
- const centerY = size > 1 ? y - Math.floor((size - 1) / 2) : y
- drawCtx.drawImage(this.brushCavnas, centerX, centerY)
+ const startX = size > 1 ? Math.round(x - size / 2) : x
+ const startY = size > 1 ? Math.round(y - size / 2) : y
+ drawCtx.drawImage(this.brushCavnas, startX, startY)
  this.painter.renderCanvas()
  }
  protected renderToolbar() {
@@ -152,8 +169,8 @@ export default class Brush extends Tool {
  brushCtx.clearRect(0, 0, size, size)
  brushCtx.fillStyle = color === 'transparent' ? 'black' : color
 
- const center = size / 2
- let radius = size / 2
+ const center = Math.round(size / 2)
+ let radius = Math.round(size / 2)
  const opacityStep = 1 / radius / ((105 - hardness) / 25)
  let opacity = opacityStep
  for (; radius > 0; radius--) {

src/painter/tools/Eraser.ts

@@ -2,8 +2,10 @@ import Tool from './Tool'
 import Brush from './Brush'
 import Pencil from './Pencil'
 import Painter, { Layer } from '../'
+import { CursorCircle } from './Pencil'
 
 export default class Eraser extends Tool {
+ private cursorCircle: CursorCircle
  constructor(painter: Painter) {
  super(painter)
 
@@ -13,6 +15,18 @@ export default class Eraser extends Tool {
  opacity: 100,
  hardness: 100,
  }
+
+ this.cursorCircle = new CursorCircle(
+ this.cursor,
+ painter,
+ this.options.size
+ )
+ }
+ setOption(name: string, val: any, renderToolbar?: boolean) {
+ super.setOption(name, val, renderToolbar)
+ if (name === 'size') {
+ this.cursorCircle.setSize(val)
+ }
  }
  onDragStart(e: any) {
  this.getTool().onDragStart(e, this.getOptions())
@@ -26,6 +40,9 @@ export default class Eraser extends Tool {
  onAfterRenderLayer(layer: Layer) {
  this.getTool().onAfterRenderLayer(layer)
  }
+ onZoom() {
+ this.cursorCircle.render()
+ }
  private getTool(): Brush | Pencil {
  return this.painter.getTool(this.options.mode) as any
  }

src/painter/tools/Pencil.ts

@@ -1,12 +1,15 @@
 import Painter, { Layer } from '../'
 import Tool from './Tool'
+import $ from 'licia/$'
+import Zoom from './Zoom'
 import defaults from 'licia/defaults'
 import nextTick from 'licia/nextTick'
 
 export default class Pencil extends Tool {
  private drawCtx: CanvasRenderingContext2D
  private drawCanvas: HTMLCanvasElement
  private isDrawing = false
+ private cursorCircle: CursorCircle
  private drawOptions: Required<IDrawOptions> = {
  color: 'rgb(0,0,0)',
  size: 1,
@@ -20,9 +23,21 @@ export default class Pencil extends Tool {
  opacity: 100,
  }
 
+ this.cursorCircle = new CursorCircle(
+ this.cursor,
+ painter,
+ this.options.size
+ )
+
  this.drawCanvas = document.createElement('canvas')
  this.drawCtx = this.drawCanvas.getContext('2d')!
  }
+ setOption(name: string, val: any, renderToolbar?: boolean) {
+ super.setOption(name, val, renderToolbar)
+ if (name === 'size') {
+ this.cursorCircle.setSize(val)
+ }
+ }
  onDragStart(e: any, drawOptions: IDrawOptions = {}) {
  super.onDragStart(e)
 
@@ -85,6 +100,9 @@ export default class Pencil extends Tool {
  this.commitDraw(this.ctx)
  }
  }
+ onZoom() {
+ this.cursorCircle.render()
+ }
  protected renderToolbar() {
  super.renderToolbar()
  const { toolbar, options } = this
@@ -111,9 +129,9 @@ export default class Pencil extends Tool {
 
  const { size, color } = this.drawOptions
  drawCtx.fillStyle = color === 'transparent' ? 'black' : color
- const centerX = size > 1 ? x - Math.floor((size - 1) / 2) : x
- const centerY = size > 1 ? y - Math.floor((size - 1) / 2) : y
- drawCtx.fillRect(centerX, centerY, size, size)
+ const startX = size > 1 ? Math.round(x - size / 2) : x
+ const startY = size > 1 ? Math.round(y - size / 2) : y
+ drawCtx.fillRect(startX, startY, size, size)
  this.painter.renderCanvas()
  }
  private commitDraw(ctx: CanvasRenderingContext2D) {
@@ -129,6 +147,47 @@ export default class Pencil extends Tool {
  }
 }
 
+export class CursorCircle {
+ private $container: $.$
+ private painter: Painter
+ private size = 1
+ constructor(container: HTMLDivElement, painter: Painter, size: number) {
+ this.$container = $(container)
+ this.painter = painter
+
+ this.setSize(size)
+ }
+ setSize(size: number) {
+ this.size = size
+ this.render()
+ }
+ render = () => {
+ const { painter } = this
+ const zoom = painter.getTool('zoom') as Zoom
+ let { size } = this
+ if (zoom) {
+ size *= Math.round(zoom.getRatio())
+ }
+ let html = ''
+ if (size > 1) {
+ const viewportSize = size + 8
+ const circle = (r: number, color: string) => {
+ return `<circle cx="${viewportSize / 2}" cy="${
+ viewportSize / 2
+ }" r="${r}" style="fill:none;stroke:${color};stroke-width:1px;"/>`
+ }
+ html = `<svg width="${viewportSize}" height="${viewportSize}" viewBox="0 0 ${viewportSize} ${viewportSize}">
+ ${circle(size / 2, '#000')}
+ ${circle(size / 2 + 1, '#fff')}
+ ${circle(size / 2 - 1, '#fff')}
+ </svg>`
+ } else {
+ html = painter.c('<span class="icon icon-crosshair"></span>')
+ }
+ this.$container.html(html)
+ }
+}
+
 interface IDrawOptions {
  color?: string
  size?: number