feat: 1t iteration of Recent used brush color palette

README.md

@@ -51,7 +51,7 @@ provides the tools you need.
 * [x] "Pencil" Brush
 * [x] "Eraser" Brush
 * [x] Brush Color
-* [ ] Recent used brush color palette
+* [x] Recent used brush color palette
 * [x] Brush Size
 * [ ] Store Drawing settings
 

resources/js/src/components/drawing-tools/BrushOptions.ts

@@ -3,8 +3,9 @@ import {customElement, property, query} from "lit/decorators.js";
 import {consume} from "@lit/context";
 import {featuresContext, sketchBookContext} from "../../store/AppContext.js";
 import {ToggleRouter} from "../../services/ToggleRouter.js";
-import '@material/web/icon/icon.js'
 import {SketchBook} from "../../domain/model/SketchBook.js";
+import '@material/web/icon/icon.js'
+import '@material/web/slider/slider.js'
 import "./Eraser.js"
 import "./Pen.js"
 import "./Pencil.js"
@@ -47,6 +48,13 @@ export class BrushOptions extends LitElement {
       left: 240px;
       margin-top: -170px;
     }
+
+    .brush-width-slider {
+      position: fixed;
+      left: 475px;
+      top: 70px;
+    }
+
     input.color[type="color"] {
       cursor: pointer;
       position: absolute;;
@@ -92,14 +100,20 @@ export class BrushOptions extends LitElement {
       border: 1px black solid;
       border-radius: 50%;
     }
-    input[type="range"] {
-      cursor: pointer;
-      position: absolute;
-      top: 15px;
+    input.rounded.secondary-1[type="color"],
+    input.rounded.secondary-2[type="color"],
+    input.rounded.secondary-3[type="color"] {
+      position: relative;
+      display: inline-flex;
+      top: -15px;
       left: 50px;
-      transform: rotate(270deg);
-      width: 60px;
+      cursor: pointer;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      background: transparent;
     }
+
   `;
 
   @consume({context: featuresContext, subscribe: true})
@@ -120,16 +134,29 @@ export class BrushOptions extends LitElement {
 
   @property() declare lineWidth: number;
 
+  @property() declare lineWidthInput: number;
+
+  @property() declare previousColor1: string;
+
+  @property() declare previousColor2: string;
+
+  @property() declare previousColor3: string;
+
   constructor() {
     super();
     this.color = "#000000";
     this.selectedBrush = 'pen';
     this.lineWidth = 3;
+    this.lineWidthInput = 9;
+    this.previousColor1 = '#527474';
+    this.previousColor2 = '#844ab2';
+    this.previousColor3 = '#e89cb9';
   }
 
   protected changeLineWidth(event: InputEvent) {
     const input: HTMLInputElement = event.target as HTMLInputElement;
-    this.lineWidth = input.value as unknown as number / Math.PI
+    this.lineWidthInput = input.value as unknown as number;
+    this.lineWidth = this.lineWidthInput / Math.PI;
     this.dispatchEvent(new CustomEvent(
       'linewidthchanged',
       {
@@ -140,6 +167,9 @@ export class BrushOptions extends LitElement {
 
   protected changeColor(event: InputEvent) {
     const input: HTMLInputElement = event.target as HTMLInputElement;
+    this.previousColor3 = this.previousColor2;
+    this.previousColor2 = this.previousColor1;
+    this.previousColor1 = this.color;
     this.color = input.value;
     this.dispatchEvent(new CustomEvent(
       'colorchanged',
@@ -149,6 +179,20 @@ export class BrushOptions extends LitElement {
     ));
   }
 
+  private changeToPreviousColor(event: InputEvent) {
+    event.preventDefault();
+    const input = event.target as HTMLInputElement;
+    const newColor = input.value;
+    input.value = this.color;
+    this.color = newColor;
+    this.dispatchEvent(new CustomEvent(
+      'colorchanged',
+      {
+        detail: this.color,
+      }
+    ));
+  }
+
   protected changeBackgroundColor(event: InputEvent) {
     const input: HTMLInputElement = event.target as HTMLInputElement;
     this.dispatchEvent(new CustomEvent(
@@ -181,6 +225,29 @@ export class BrushOptions extends LitElement {
     await this.updateComplete;
   }
 
+  private renderSecondaryColorPickers() {
+    return html `
+        <input
+          class="rounded secondary-1"
+          @click=${this.changeToPreviousColor}
+          type="color"
+          .value=${this.previousColor1}
+        />
+        <input
+          class="rounded secondary-2"
+          @click=${this.changeToPreviousColor}
+          type="color"
+          .value=${this.previousColor2}
+        />
+        <input
+          class="rounded secondary-3"
+          @click=${this.changeToPreviousColor}
+          type="color"
+          .value=${this.previousColor3}
+        />
+    `;
+  }
+
   private renderColorPicker() {
     const canvasBackgroundColor = this.features.isEnabled('canvas-background-color')
 
@@ -193,19 +260,28 @@ export class BrushOptions extends LitElement {
           .value=${this.sketchBook.background}
         />
         <input class="rounded" type="color" @change=${this.changeColor} .value=${this.color} />
+        ${this.renderSecondaryColorPickers()}
       `
     }
 
     return html `
       <input class="color"  type="color" @input=${this.changeColor} .value=${this.color} />
+      ${this.renderSecondaryColorPickers()}
     `
   }
 
   protected render() {
     return html`
       <div class="brushes">
         ${this.renderColorPicker()}
-        <input class="brush-width-slider" type="range" min="2" max="100" @input=${this.changeLineWidth} .value=${this.lineWidth} />
+        <md-slider
+          class="brush-width-slider"
+          ticks
+          min="2"
+          max="100"
+          @change=${this.changeLineWidth}
+          .value=${this.lineWidthInput}
+        ></md-slider>
         <brush-pen
           class="brush pen selected"
           data-value="pen"

resources/js/src/components/sketch-book/SketchPreview.ts

@@ -32,7 +32,18 @@ export class SketchPreview extends LitElement {
     .buttons {
       position: relative;
       display: inline-flex;
-      margin-left: 100px;
+    }
+
+    .buttons .close-button {
+      position: absolute;
+      top: -25px;
+      left: 140px;
+    }
+
+    .buttons .download-button {
+      position: absolute;
+      top: -25px;
+      left: 95px;
     }
 
     md-filled-icon-button {

resources/js/test/components/drawing-tools/BrushOptions.test.ts

@@ -49,9 +49,11 @@ describe('<brush-options> components.', () => {
     const el: BrushOptions = await fixture(
       html` <brush-options .features=${new ToggleRouter([])}></brush-options> `
     );
+    await elementUpdated(el);
 
-    const lineWidthSlider: HTMLDivElement = el.shadowRoot.querySelector('.brush-width-slider');
-    expect(lineWidthSlider).to.have.value('3');
+    const lineWidthSlider: HTMLInputElement = el.shadowRoot.querySelector('.brush-width-slider');
+    expect(lineWidthSlider.value).to.be.equal(9);
+    expect(el.lineWidth).to.be.equal(3);
   });
 
 
@@ -70,7 +72,6 @@ describe('<brush-options> components.', () => {
     );
 
     const pickers: Array<HTMLDivElement> = el.shadowRoot.querySelectorAll('.rounded') as Array<HTMLDivElement>;
-    expect(pickers).to.have.length(2);
 
     const bgColorPicker: HTMLDivElement = pickers[0];
     await expect(bgColorPicker).to.have.attribute('type').to.be.equal('color');
@@ -81,4 +82,34 @@ describe('<brush-options> components.', () => {
     expect(colorPicker).to.have.value('#000000');
   });
 
+  it('should have three secondary color pickers', async () => {
+    const el: BrushOptions = await fixture(
+      html` <brush-options .features=${new ToggleRouter([])}></brush-options> `
+    );
+    const pickers: Array<HTMLInputElement> = await el.shadowRoot.querySelectorAll('.rounded') as Array<HTMLInputElement>;
+    expect(el.color).to.be.equal('#000000');
+
+    const pickerColor =  pickers[0].value;
+    const recentColor = el.color;
+    pickers[0].click();
+    await elementUpdated(el);
+    expect(el.color).to.be.equal(pickerColor);
+    expect(pickers[0].value).to.be.equal(recentColor);
+
+    const pickerColor1 =  pickers[1].value;
+    const recentColor1 = el.color;
+    pickers[1].click();
+    await elementUpdated(el);
+    expect(el.color).to.be.equal(pickerColor1);
+    expect(pickers[1].value).to.be.equal(recentColor1);
+
+    const pickerColor2 =  pickers[2].value;
+    const recentColor2 = el.color;
+    pickers[2].click();
+    await elementUpdated(el);
+    expect(el.color).to.be.equal(pickerColor2);
+    expect(pickers[2].value).to.be.equal(recentColor2);
+
+  });
+
 });