From 4a42051632d0cf4982785a491b71193233e156a0 Mon Sep 17 00:00:00 2001 From: EGRrqq Date: Sun, 28 Jan 2024 10:32:01 -0500 Subject: [PATCH] feat(cache): tool settings support --- .../canvasData/Data/ElementDataController.ts | 19 +++++- .../canvasData/Data/IElement.ts | 4 +- .../canvasData/cache/cacheController.ts | 58 +++++++++++++------ src/index.ts | 11 ++-- 4 files changed, 68 insertions(+), 24 deletions(-) diff --git a/src/canvasController/canvasData/Data/ElementDataController.ts b/src/canvasController/canvasData/Data/ElementDataController.ts index 60e9af6..e703eed 100644 --- 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 index 0f5017a..4fabd74 100644 --- 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 index acb7af8..b8df634 100644 --- 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,21 +85,24 @@ 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]; @@ -86,7 +110,7 @@ export class CacheController implements ICacheController { 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 index d13ade0..1b5a87f 100644 --- 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); } }