Store drawing palette and brush

README.md

@@ -53,7 +53,7 @@ provides the tools you need.
 * [x] Brush Color
 * [x] Recent used brush color palette
 * [x] Brush Size
-* [ ] Store Drawing settings
+* [x] Store Drawing settings
 
 ### Sketch Book
 

app/Listeners/OpenDocumentWindow.php

@@ -13,11 +13,15 @@
 use OpenSketch\SketchBook\Domain\Handler\CreateNewSketchBook;
 use OpenSketch\SketchBook\Domain\Handler\ResetSketchBookLocation;
 use OpenSketch\SketchBook\Domain\Handler\SaveSketchBook;
+use OpenSketch\SketchBook\Domain\Model\SketchBook;
 use OpenSketch\Window\Domain\Command\OpenWindowCommand;
 use OpenSketch\Window\Domain\Handler\OpenFileDialog;
 use OpenSketch\Window\Domain\Handler\OpenWindow;
 use Ramsey\Uuid\Uuid;
 
+/**
+ * @phpstan-import-type SketchBookNormalized from SketchBook
+ */
 final class OpenDocumentWindow
 {
     private const JSON_DEPTH = 512;
@@ -42,11 +46,7 @@ public function handle(DocumentOpened $event): void
         }
 
         /**
-         * @var array{
-         *   id: string,
-         *   sketches: array<array{id: string, image: string}>,
-         *   background: string|null
-         * } $sketchBookData
+         * @var SketchBookNormalized $sketchBookData
          */
         $sketchBookData = json_decode(
             $fileContents,
@@ -73,7 +73,8 @@ public function handle(DocumentOpened $event): void
                 SaveSketchBookCommand::from(
                     $sketchBookId,
                     $sketchBookData['sketches'],
-                    $sketchBookData['background'] ?? '#ffffff',
+                    $sketchBookData['brush'],
+                    $sketchBookData['palette'],
                 )
             );
         }

resources/js/src/components/canvas/SketchCanvas.ts

@@ -1,8 +1,7 @@
 import {LitElement, css, html} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
 import {consume} from "@lit/context";
-import {brushContext, featuresContext, sketchBookContext} from "../../store/AppContext.js";
-import {Brush} from "../../domain/model/Brush.js";
+import {featuresContext, sketchBookContext} from "../../store/AppContext.js";
 import {DrawingTool} from "../../domain/model/DrawingTool.js";
 import {ToggleRouter} from "../../services/ToggleRouter.js";
 import {SketchBook} from "../../domain/model/SketchBook.js";
@@ -52,10 +51,6 @@ export class SketchCanvas extends LitElement {
 
   @query(".cursor") cursor!: HTMLDivElement;
 
-  @consume({context: brushContext, subscribe: true})
-  @property({attribute: false})
-  brush: Brush
-
   @consume({context: sketchBookContext, subscribe: true})
   @property({attribute: false})
   sketchBook: SketchBook
@@ -83,7 +78,7 @@ export class SketchCanvas extends LitElement {
     this.canvasHeight = this.parentElement!.offsetHeight - 50;
     this.drawingTool = new DrawingTool(this.canvas.getContext("2d"))
     this.drawingTool.clearCanvas(this.canvasWidth, this.canvasHeight, this.image);
-    this.drawingTool.setBrush(this.brush);
+    this.drawingTool.setBrushAndPalette(this.sketchBook.brush, this.sketchBook.palette);
     this.canvasBackgroundColor = this.features!.isEnabled('canvas-background-color')
     if (this.canvasBackgroundColor) {
       this.canvas.classList.remove('white-background')
@@ -94,12 +89,12 @@ export class SketchCanvas extends LitElement {
 
   protected async updated(_changedProperties) {
     super.updated(_changedProperties);
-    this.drawingTool.setBrush(this.brush);
+    this.drawingTool.setBrushAndPalette(this.sketchBook.brush, this.sketchBook.palette);
     const image = _changedProperties.get('image');
     if (typeof image === 'string') {
       this.image = new URL(this.image);
     }
-    if (this.resetCanvas === true) {
+    if (this.resetCanvas) {
       this.canvasWidth = this.offsetWidth;
       this.canvasHeight = this.parentElement!.offsetHeight - 50;
       this.drawingTool.clearCanvas(this.canvasWidth, this.canvasHeight, this.image);
@@ -112,12 +107,12 @@ export class SketchCanvas extends LitElement {
   }
 
   protected moveCursor(event: MouseEvent) {
-    const cursorWidth =  this.brush.lineWidth > 3 ? this.brush.lineWidth : 3;
+    const cursorWidth =  this.sketchBook.brush.width > 3 ? this.sketchBook.brush.width : 3;
     this.cursor.style.width = `${cursorWidth}px`;
     this.cursor.style.height = `${cursorWidth}px`;
-    this.cursor.style.background = this.brush.color;
-    const mouseY = event.offsetY - (this.brush.lineWidth / 2);
-    const mouseX = event.offsetX - (this.brush.lineWidth / 2);
+    this.cursor.style.background = this.sketchBook.palette.primaryColor;
+    const mouseY = event.offsetY - (this.sketchBook.brush.width / 2);
+    const mouseX = event.offsetX - (this.sketchBook.brush.width / 2);
     this.cursor.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
   }
 
@@ -127,8 +122,8 @@ export class SketchCanvas extends LitElement {
   }
 
   protected startDrawing(event: MouseEvent) {
-    if (!this.drawingTool.hasCurrentBrush(this.brush)) {
-      this.drawingTool.setBrush(this.brush);
+    if (!this.drawingTool.hasCurrentBrushAndPalette(this.sketchBook.brush, this.sketchBook.palette)) {
+      this.drawingTool.setBrushAndPalette(this.sketchBook.brush, this.sketchBook.palette);
     }
 
     this.drawingTool.startDrawing(event.offsetX, event.offsetY);
@@ -147,7 +142,7 @@ export class SketchCanvas extends LitElement {
         detail: {
           id: this.sketchId,
           image: new URL(this.canvas.toDataURL("image/png")),
-          background: this.sketchBook.background,
+          background: this.sketchBook.palette.backgroundColor,
         }
       }
     ))
@@ -157,7 +152,7 @@ export class SketchCanvas extends LitElement {
     if (this.canvasBackgroundColor) {
       return html`
         <canvas
-          .style="background:${this.sketchBook.background};"
+          .style="background:${this.sketchBook.palette.backgroundColor};"
           class="background"
           width=${this.canvasWidth}
           height=${this.canvasHeight}

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

@@ -1,9 +1,10 @@
 import {LitElement, css, html} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
 import {consume} from "@lit/context";
-import {featuresContext, sketchBookContext} from "../../store/AppContext.js";
+import {featuresContext} from "../../store/AppContext.js";
 import {ToggleRouter} from "../../services/ToggleRouter.js";
-import {SketchBook} from "../../domain/model/SketchBook.js";
+import {Brush} from "../../domain/model/Brush.js";
+import {Palette} from "../../domain/model/Palette.js";
 import '@material/web/icon/icon.js'
 import '@material/web/slider/slider.js'
 import "./Eraser.js"
@@ -113,23 +114,20 @@ export class BrushOptions extends LitElement {
       height: 50px;
       background: transparent;
     }
-
   `;
 
   @consume({context: featuresContext, subscribe: true})
   @property({attribute: false})
   declare features: ToggleRouter
 
-  @consume({context: sketchBookContext, subscribe: true})
-  @property({attribute: false})
-  declare sketchBook: SketchBook
-
   @query('.background-color-input-button') backgroundInputButton: HTMLDivElement;
 
   @query('.background-color-input') backgroundInput: HTMLInputElement;
 
   @property() declare color: string;
 
+  @property() declare backgroundColor: string;
+
   @property() declare selectedBrush: string;
 
   @property() declare lineWidth: number;
@@ -144,23 +142,31 @@ export class BrushOptions extends LitElement {
 
   constructor() {
     super();
-    this.color = "#000000";
     this.selectedBrush = 'pen';
     this.lineWidth = 3;
     this.lineWidthInput = 9;
+    this.color = "#000000";
+    this.backgroundColor = "#ffffff";
     this.previousColor1 = '#527474';
     this.previousColor2 = '#844ab2';
     this.previousColor3 = '#e89cb9';
   }
 
+  protected firstUpdated() {
+    this.lineWidthInput = this.lineWidth * Math.PI;
+  }
+
   protected changeLineWidth(event: InputEvent) {
     const input: HTMLInputElement = event.target as HTMLInputElement;
     this.lineWidthInput = input.value as unknown as number;
     this.lineWidth = this.lineWidthInput / Math.PI;
     this.dispatchEvent(new CustomEvent(
       'linewidthchanged',
       {
-        detail: this.lineWidth,
+        detail: {
+          type: this.selectedBrush,
+          width: this.lineWidth,
+        } as Brush,
       }
     ));
   }
@@ -174,7 +180,13 @@ export class BrushOptions extends LitElement {
     this.dispatchEvent(new CustomEvent(
       'colorchanged',
       {
-        detail: this.color,
+        detail: {
+          primaryColor: this.color,
+          backgroundColor: this.backgroundColor,
+          secondaryColor1: this.previousColor1,
+          secondaryColor2: this.previousColor2,
+          secondaryColor3: this.previousColor3,
+        } as Palette,
       }
     ));
   }
@@ -188,17 +200,30 @@ export class BrushOptions extends LitElement {
     this.dispatchEvent(new CustomEvent(
       'colorchanged',
       {
-        detail: this.color,
+        detail: {
+          primaryColor: this.color,
+          backgroundColor: this.backgroundColor,
+          secondaryColor1: this.previousColor1,
+          secondaryColor2: this.previousColor2,
+          secondaryColor3: this.previousColor3,
+        } as Palette,
       }
     ));
   }
 
   protected changeBackgroundColor(event: InputEvent) {
     const input: HTMLInputElement = event.target as HTMLInputElement;
+    this.backgroundColor = input.value;
     this.dispatchEvent(new CustomEvent(
       'backgroundcolorchanged',
       {
-        detail: input.value,
+        detail: {
+          primaryColor: this.color,
+          backgroundColor: input.value,
+          secondaryColor1: this.previousColor1,
+          secondaryColor2: this.previousColor2,
+          secondaryColor3: this.previousColor3,
+        } as Palette,
       }
     ));
   }
@@ -218,7 +243,10 @@ export class BrushOptions extends LitElement {
     this.dispatchEvent(new CustomEvent(
       'brushselected',
       {
-        detail: this.selectedBrush,
+        detail: {
+          type: this.selectedBrush,
+          width: this.lineWidth,
+        } as Brush,
       }
     ));
 
@@ -257,9 +285,15 @@ export class BrushOptions extends LitElement {
           class="background-color rounded"
           type="color"
           @change=${this.changeBackgroundColor}
-          .value=${this.sketchBook.background}
+          .value=${this.backgroundColor}
+        />
+        <input
+          class="rounded"
+          type="color"
+          @change=${this.changeColor}
+          autocomplete
+          .value=${this.color}
         />
-        <input class="rounded" type="color" @change=${this.changeColor} .value=${this.color} />
         ${this.renderSecondaryColorPickers()}
       `
     }
@@ -283,19 +317,19 @@ export class BrushOptions extends LitElement {
           .value=${this.lineWidthInput}
         ></md-slider>
         <brush-pen
-          class="brush pen selected"
+          class="brush pen ${this.selectedBrush === 'pen' ? 'selected' : ''}"
           data-value="pen"
           @click=${this.selectBrush}
           .selection=${this.selectedBrush}
         ></brush-pen>
         <brush-pencil
-          class="brush pencil"
+          class="brush pencil ${this.selectedBrush === 'pencil' ? 'selected' : ''}"
           data-value="pencil"
           @click=${this.selectBrush}
           .selection=${this.selectedBrush}
         ></brush-pencil>
         <brush-eraser
-          class="brush eraser"
+          class="brush eraser ${this.selectedBrush === 'eraser' ? 'selected' : ''}"
           data-value="eraser"
           @click=${this.selectBrush}
           .selection=${this.selectedBrush}

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

@@ -182,7 +182,7 @@ export class SketchNavigator extends LitElement {
             <sketch-preview
               .sketchId=${sketch.id}
               .image=${sketch.image}
-              .background=${this.sketchBook.background}
+              .background=${this.sketchBook.palette.backgroundColor}
               @sketchselected=${this.goToSelectedSketch}
               @sketchdeleted=${this.deleteSketch}
               @sketchdownloaded=${this.downloadSketch}

resources/js/src/domain/model/Brush.ts

@@ -1,5 +1,4 @@
 export interface Brush {
-  lineWidth: number,
-  color: string,
+  width: number,
   type: string,
 }

resources/js/src/domain/model/DrawingTool.ts

@@ -3,6 +3,7 @@ import {Pen} from "./Pen.js";
 import {Tool} from "./Tool.js";
 import {Pencil} from "./Pencil.js";
 import {Eraser} from "./Eraser.js";
+import {Palette} from "./Palette.js";
 
 export class DrawingTool {
   context: CanvasRenderingContext2D;
@@ -17,11 +18,11 @@ export class DrawingTool {
 
   }
 
-  public hasCurrentBrush(brush: Brush): boolean {
+  public hasCurrentBrushAndPalette(brush: Brush, palette: Palette): boolean {
     if (
       this.tool.name() === brush.type
-      && this.context.lineWidth === brush.lineWidth
-      && this.context.fillStyle === brush.color
+      && this.context.lineWidth === brush.width
+      && this.context.fillStyle === palette.primaryColor
     ) {
       return true;
     }
@@ -39,7 +40,7 @@ export class DrawingTool {
     }, 0);
   }
 
-  public setBrush(brush: Brush)
+  public setBrushAndPalette(brush: Brush, palette: Palette)
   {
     if(brush.type === "pencil") {
       this.tool = new Pencil(this.context);
@@ -49,9 +50,9 @@ export class DrawingTool {
       this.tool = new Pen(this.context);
     }
 
-    this.context.lineWidth = brush.lineWidth;
-    this.context.fillStyle = brush.color;
-    this.context.strokeStyle = brush.color;
+    this.context.lineWidth = brush.width;
+    this.context.fillStyle = palette.primaryColor;
+    this.context.strokeStyle = palette.primaryColor;
   }
 
   public clearCanvas(canvasWidth: number, canvasHeight: number, image: URL) {

resources/js/src/domain/model/Palette.ts

@@ -0,0 +1,7 @@
+export interface Palette {
+  primaryColor: string,
+  backgroundColor: string,
+  secondaryColor1: string,
+  secondaryColor2: string,
+  secondaryColor3: string,
+}