feat(painter): color selection

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');
 }
 
@@ -29,12 +29,18 @@
 .icon-pencil:before {
  content: '\f105';
 }
-.icon-zoom-in:before {
+.icon-reset-color:before {
  content: '\f106';
 }
-.icon-zoom-out:before {
+.icon-swap:before {
  content: '\f107';
 }
-.icon-zoom:before {
+.icon-zoom-in:before {
  content: '\f108';
 }
+.icon-zoom-out:before {
+ content: '\f109';
+}
+.icon-zoom:before {
+ content: '\f10a';
+}

src/painter/index.ts

@@ -44,6 +44,8 @@ export default class Painter extends Component<IOptions> {
  private activeLayer: Layer
  private resizeSensor: ResizeSensor
  private canvasResizeSenor: ResizeSensor
+ private $foregroundColor: $.$
+ private $backgroundColor: $.$
  constructor(container: HTMLElement, options: IOptions = {}) {
  super(container, { compName: 'painter' }, options)
 
@@ -60,6 +62,8 @@ export default class Painter extends Component<IOptions> {
  this.$viewport = this.find('.viewport')
  this.viewport = this.$viewport.get(0) as HTMLDivElement
  this.$body = this.find('.body')
+ this.$foregroundColor = this.find('.palette-foreground').find('input')
+ this.$backgroundColor = this.find('.palette-background').find('input')
  this.canvas = this.$canvas.get(0) as HTMLCanvasElement
  this.ctx = this.canvas.getContext('2d')!
 
@@ -131,6 +135,12 @@ export default class Painter extends Component<IOptions> {
  return this.eraser
  }
  }
+ getForegroundColor() {
+ return this.$foregroundColor.val()
+ }
+ getBackgroundColor() {
+ return this.$backgroundColor.val()
+ }
  getCanvas() {
  return this.canvas
  }
@@ -168,6 +178,20 @@ export default class Painter extends Component<IOptions> {
  <div class="tool" data-tool="zoom">
  <span class="icon icon-zoom"></span>
  </div>
+ <div class="palette">
+ <div class="palette-head">
+ <span class="icon icon-reset-color"></span>
+ <span class="icon icon-swap"></span>
+ </div>
+ <div class="palette-body">
+ <div class="palette-foreground">
+ <input type="color" value="#000000"></input>
+ </div>
+ <div class="palette-background">
+ <input type="color" value="#ffffff"></input>
+ </div>
+ </div>
+ </div>
  </div>
  <div class="viewport">
  <div class="body">
@@ -182,16 +206,26 @@ export default class Painter extends Component<IOptions> {
  )
  }
  private bindEvent() {
- const { $viewport, $tools, c } = this
+ const { $viewport, $tools, $foregroundColor, $backgroundColor, c } = this
 
  $viewport.on(drag('start'), this.onViewportDragStart)
  $viewport.on('click', this.onViewportClick)
 
  const self = this
- $tools.on('click', c('.tool'), function (this: HTMLDivElement) {
- const $this = $(this)
- self.useTool($this.data('tool'))
- })
+ $tools
+ .on('click', c('.tool'), function (this: HTMLDivElement) {
+ const $this = $(this)
+ self.useTool($this.data('tool'))
+ })
+ .on('click', c('.icon-reset-color'), () => {
+ $foregroundColor.val('#000000')
+ $backgroundColor.val('#ffffff')
+ })
+ .on('click', c('.icon-swap'), () => {
+ const foreground = $foregroundColor.val()
+ $foregroundColor.val($backgroundColor.val())
+ $backgroundColor.val(foreground)
+ })
 
  this.resizeSensor.addListener(this.onResize)
  this.canvasResizeSenor.addListener(this.resetViewport)

src/painter/style.scss

@@ -1,5 +1,4 @@
 @import '../share/mixin';
-@import '../share/theme';
 
 .luna-painter {
  @include component();
@@ -52,6 +51,63 @@
  }
 }
 
+.palette {
+ width: 34px;
+ height: 50px;
+ margin: 3px auto;
+}
+
+.palette-head {
+ display: flex;
+ span {
+ flex: 1;
+ font-size: 12px;
+ text-align: center;
+ }
+}
+
+.palette-body {
+ position: relative;
+ margin-top: 4px;
+}
+
+.palette-foreground,
+.palette-background {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 1px solid #000;
+ input {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ border: 1px solid $color-white;
+ &::-webkit-color-swatch-wrapper {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ border: none;
+ }
+ &::-webkit-color-swatch {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ border: none;
+ }
+ }
+}
+
+.palette-foreground {
+ left: 2px;
+ top: 0;
+ z-index: 5;
+}
+
+.palette-background {
+ left: 12px;
+ top: 10px;
+}
+
 .viewport {
  width: 100%;
  height: 100%;

src/painter/tools/Brush.ts

@@ -41,7 +41,7 @@ export default class Brush extends Tool {
  nextTick(() => {
  this.isDrawing = true
  defaults(drawOptions, {
- color: 'rgb(0,0,0)',
+ color: this.painter.getForegroundColor(),
  size: options.size,
  opacity: options.opacity,
  hardness: options.hardness,

src/painter/tools/Pencil.ts

@@ -34,7 +34,7 @@ export default class Pencil extends Tool {
  nextTick(() => {
  this.isDrawing = true
  defaults(drawOptions, {
- color: 'rgb(0,0,0)',
+ color: this.painter.getForegroundColor(),
  size: options.size,
  opacity: options.opacity,
  })