feat(cache): tool settings support

EGRrqq · Jan 28, 2024 · 4a42051 · 4a42051
1 parent b107b4b
commit 4a42051
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 24 deletions.
diff --git a/src/canvasController/canvasData/Data/ElementDataController.ts b/src/canvasController/canvasData/Data/ElementDataController.ts
@@ -1,6 +1,7 @@
+import { IStrokeSettings } from "../../tools/IStrokeTool";
 import { IElement } from "./IElement";
 
-interface IElementDataController {
+export interface IElementDataController {
   elementData: IElement;
 
   onPointerDown: (x: number, y: number, type: string) => void;
@@ -13,6 +14,7 @@ interface IElementDataController {
 // like: ToolData.remove({id: "ryue25jfeoirieogh"});
 // static remove(id: string): void {}
 export class ElementDataController implements IElementDataController {
+  #ctx: CanvasRenderingContext2D;
   #captureFlag = false;
 
   #id: string = "";
@@ -21,8 +23,12 @@ export class ElementDataController implements IElementDataController {
   #x: number = 0;
   #y: number = 0;
   #lastPoint: [number, number] = [0, 0];
+  #settings: IStrokeSettings;
+
+  constructor(ctx: CanvasRenderingContext2D, settings: IStrokeSettings) {
+    this.#ctx = ctx;
+    this.#settings = settings;
 
-  constructor() {
     this.#generateId(3);
   }
 
@@ -34,6 +40,7 @@ export class ElementDataController implements IElementDataController {
       x: this.#x,
       y: this.#y,
       lastPoint: this.#lastPoint,
+      settings: this.#settings,
     };
   }
 
@@ -61,6 +68,7 @@ export class ElementDataController implements IElementDataController {
 
   onPointerUp = () => {
     this.#captureFlag = false;
+    this.#assignSettings(this.#settings);
 
     // set width/height
   };
@@ -78,4 +86,11 @@ export class ElementDataController implements IElementDataController {
       i++;
     }
   }
+
+  #assignSettings(settings: IStrokeSettings) {
+    for (let prop in settings) {
+      //@ts-ignore
+      settings[prop] = this.#ctx[prop];
+    }
+  }
 }
diff --git a/src/canvasController/canvasData/Data/IElement.ts b/src/canvasController/canvasData/Data/IElement.ts
@@ -1,3 +1,5 @@
+import { IStrokeSettings } from "../../tools/IStrokeTool";
+
 export interface IElement {
   id: string;
 
@@ -14,7 +16,7 @@ export interface IElement {
   points: [number, number][];
   lastPoint: [number, number];
 
-  // settings: IElementSettings;
+  settings: IStrokeSettings;
 
   // boundingRect help to set width and height values
   // width?: number;

diff --git a/src/canvasController/canvasData/cache/cacheController.ts b/src/canvasController/canvasData/cache/cacheController.ts
@@ -5,35 +5,53 @@ import {
   IData,
   IElement,
 } from "../Data";
+import { IElementDataController } from "../Data/ElementDataController";
 
 export interface ICacheController {
   appData: IData;
 
-  mouseAttach(canvasEl: HTMLCanvasElement): void;
-  touchAttach(canvasEl: HTMLCanvasElement): void;
+  mouseAttach(ctx: CanvasRenderingContext2D): void;
+  touchAttach(ctx: CanvasRenderingContext2D): void;
 
-  iterateOverPoints: (points: IElement["points"]) => void;
+  iterateOverPoints: (
+    points: IElement["points"],
+    settings: IElement["settings"]
+  ) => void;
 
   storeDataElement: (element: IElement) => void;
   clearDataElements: () => void;
 }
 
 export class CacheController implements ICacheController {
-  #elementDataController = new ElementDataController();
+  #elementDataController: IElementDataController;
   #appDataController = new AppDataController();
   #storageDataKey = "LittleNotes";
 
   #toolsController: ITollsController;
+  #ctx: CanvasRenderingContext2D;
 
-  constructor(toolsController: ITollsController) {
+  constructor(
+    ctx: CanvasRenderingContext2D,
+    toolsController: ITollsController
+  ) {
+    this.#ctx = ctx;
     this.#toolsController = toolsController;
 
+    this.#elementDataController = new ElementDataController(
+      ctx,
+      toolsController.activeTool.settings
+    );
+
+    // also need to restore last element settings
     this.#restoreDataElements();
   }
 
-  mouseAttach(canvasEl: HTMLCanvasElement): void {
-    canvasEl.addEventListener("mousedown", (e: MouseEvent) => {
-      this.#elementDataController = new ElementDataController();
+  mouseAttach(): void {
+    this.#ctx.canvas.addEventListener("mousedown", (e: MouseEvent) => {
+      this.#elementDataController = new ElementDataController(
+        this.#ctx,
+        this.#toolsController.activeTool.settings
+      );
 
       this.#elementDataController.onPointerDown(
         e.clientX,
@@ -42,20 +60,23 @@ export class CacheController implements ICacheController {
       );
     });
 
-    canvasEl.addEventListener("mousemove", (e: MouseEvent) =>
+    this.#ctx.canvas.addEventListener("mousemove", (e: MouseEvent) =>
       this.#elementDataController.onPointerMove(e.clientX, e.clientY)
     );
 
-    canvasEl.addEventListener("mouseup", () => {
+    this.#ctx.canvas.addEventListener("mouseup", () => {
       this.#elementDataController.onPointerUp();
 
       this.storeDataElement(this.#elementDataController.elementData);
     });
   }
 
-  touchAttach(canvasEl: HTMLCanvasElement): void {
-    canvasEl.addEventListener("touchstart", (e: TouchEvent) => {
-      this.#elementDataController = new ElementDataController();
+  touchAttach(): void {
+    this.#ctx.canvas.addEventListener("touchstart", (e: TouchEvent) => {
+      this.#elementDataController = new ElementDataController(
+        this.#ctx,
+        this.#toolsController.activeTool.settings
+      );
 
       this.#elementDataController.onPointerDown(
         Math.round(e.touches[0].clientX),
@@ -64,29 +85,32 @@ export class CacheController implements ICacheController {
       );
     });
 
-    canvasEl.addEventListener("touchmove", (e: TouchEvent) =>
+    this.#ctx.canvas.addEventListener("touchmove", (e: TouchEvent) =>
       this.#elementDataController.onPointerMove(
         Math.round(e.touches[0].clientX),
         Math.round(e.touches[0].clientY)
       )
     );
 
-    canvasEl.addEventListener("touchend", () => {
+    this.#ctx.canvas.addEventListener("touchend", () => {
       this.#elementDataController.onPointerUp();
 
       this.storeDataElement(this.#elementDataController.elementData);
     });
   }
 
-  iterateOverPoints = (points: IElement["points"]) => {
+  iterateOverPoints = (
+    points: IElement["points"],
+    settings: IElement["settings"]
+  ) => {
     for (let i = 0, length = points.length - 1; i < length; i++) {
       let x0 = points[i][0];
       let y0 = points[i][1];
 
       let x1 = points[i + 1][0];
       let y1 = points[i + 1][1];
 
-      this.#toolsController.activeTool.draw(x0, y0, x1, y1);
+      this.#toolsController.activeTool.draw(x0, y0, x1, y1, settings);
     }
   };
 

diff --git a/src/index.ts b/src/index.ts
@@ -36,16 +36,19 @@ if (boardController.ctx) {
   touchController.attach();
 
   // cache setup
-  const cacheController = new CacheController(toolsController);
+  const cacheController = new CacheController(
+    boardController.ctx,
+    toolsController
+  );
 
-  cacheController.mouseAttach(board);
-  cacheController.touchAttach(board);
+  cacheController.mouseAttach();
+  cacheController.touchAttach();
 
   // canvas setup
   function iterateOverData() {
     for (let element of cacheController.appData.elements) {
       boardController.moveOriginPointTo(element.x, element.y);
-      cacheController.iterateOverPoints(element.points);
+      cacheController.iterateOverPoints(element.points, element.settings);
       boardController.resetOriginPoint(windowData.dpr);
     }
   }