chore: small changes

index.json

@@ -343,7 +343,7 @@
   },
   "toolbar": {
     "react": true,
-    "version": "0.5.1",
+    "version": "0.5.2",
     "style": true,
     "icon": false,
     "test": true,

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,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')
+  src: url('data:application/x-font-woff;charset=utf-8;base64,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')
     format('woff');
 }
 
@@ -17,21 +17,24 @@
 .icon-brush:before {
   content: '\f101';
 }
-.icon-hand:before {
+.icon-eraser:before {
   content: '\f102';
 }
-.icon-paint-bucket:before {
+.icon-hand:before {
   content: '\f103';
 }
-.icon-pencil:before {
+.icon-paint-bucket:before {
   content: '\f104';
 }
-.icon-zoom-in:before {
+.icon-pencil:before {
   content: '\f105';
 }
-.icon-zoom-out:before {
+.icon-zoom-in:before {
   content: '\f106';
 }
-.icon-zoom:before {
+.icon-zoom-out:before {
   content: '\f107';
 }
+.icon-zoom:before {
+  content: '\f108';
+}

src/painter/index.ts

@@ -4,7 +4,7 @@ import $ from 'licia/$'
 import each from 'licia/each'
 import ResizeSensor from 'licia/ResizeSensor'
 import { exportCjs, drag } from '../share/util'
-import { Brush, Pencil, Hand, Zoom, PaintBucket, Tool } from './tools'
+import { Brush, Pencil, Hand, Zoom, PaintBucket, Eraser, Tool } from './tools'
 
 const $document = $(document as any)
 
@@ -40,6 +40,7 @@ export default class Painter extends Component<IOptions> {
   private hand: Hand
   private zoom: Zoom
   private paintBucket: PaintBucket
+  private eraser: Eraser
   private activeLayer: Layer
   private resizeSensor: ResizeSensor
   private canvasResizeSenor: ResizeSensor
@@ -75,6 +76,7 @@ export default class Painter extends Component<IOptions> {
     this.hand = new Hand(this)
     this.zoom = new Zoom(this)
     this.paintBucket = new PaintBucket(this)
+    this.eraser = new Eraser(this)
 
     this.resetViewport()
     this.hand.centerCanvas()
@@ -125,6 +127,8 @@ export default class Painter extends Component<IOptions> {
         return this.zoom
       case 'paintBucket':
         return this.paintBucket
+      case 'eraser':
+        return this.eraser
     }
   }
   getCanvas() {
@@ -152,6 +156,9 @@ export default class Painter extends Component<IOptions> {
           <div class="tool" data-tool="pencil">
             <span class="icon icon-pencil"></span>
           </div>
+          <div class="tool" data-tool="eraser">
+            <span class="icon icon-eraser"></span>
+          </div>
           <div class="tool" data-tool="paintBucket">
             <span class="icon icon-paint-bucket"></span>
           </div>

src/painter/tools/Eraser.ts

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

src/painter/tools/Hand.ts

@@ -32,9 +32,13 @@ export default class Hand extends Tool {
     super.renderToolbar()
 
     const { toolbar } = this
-    toolbar.appendButton('100%', () => {
-      const zoom = this.painter.getTool('zoom') as Zoom
-      zoom.zoomTo(1)
-    }, 'hover')
+    toolbar.appendButton(
+      '100%',
+      () => {
+        const zoom = this.painter.getTool('zoom') as Zoom
+        zoom.zoomTo(1)
+      },
+      'hover'
+    )
   }
 }

src/painter/tools/PaintBucket.ts

@@ -1,3 +1,24 @@
 import Tool from './Tool'
+import Painter from '../'
 
-export default class PaintBucket extends Tool {}
+export default class PaintBucket extends Tool {
+  constructor(painter: Painter) {
+    super(painter)
+
+    this.options = {
+      tolerance: 0,
+    }
+  }
+  protected renderToolbar() {
+    super.renderToolbar()
+
+    const { toolbar, options } = this
+
+    toolbar.appendText('Tolerance:')
+    toolbar.appendNumber('tolerance', options.tolerance, {
+      min: 0,
+      max: 255,
+      step: 1,
+    })
+  }
+}

src/painter/tools/index.ts

@@ -4,3 +4,4 @@ export { default as Hand } from './Hand'
 export { default as Zoom } from './Zoom'
 export { default as Brush } from './Brush'
 export { default as PaintBucket } from './PaintBucket'
+export { default as Eraser } from './Eraser'

src/toolbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolbar",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Application toolbar",
   "luna": {
     "react": true

src/toolbar/style.scss

@@ -6,6 +6,7 @@
   display: flex;
   white-space: nowrap;
   overflow-x: hidden;
+  font-size: #{$font-size-s-m}px;
   border-bottom: 1px solid $color-border;
 }
 
@@ -26,6 +27,7 @@
   margin-top: 4px;
   margin-bottom: 4px;
   select {
+    font-size: #{$font-size-s-m}px;
     max-width: 200px;
   }
 }