Merge pull request #46 from MarkE16/small-refactor

refactor: fix drawing background and store values

Author: MarkE16

src/components/ColorWheel/ColorWheel.tsx

@@ -29,7 +29,7 @@ function ColorWheel(props: ColorWheelProps): ReactNode {
 		}))
 	);
 
-	const onChange = (color: Color) => changeColor(color.toString());
+	const onChange = (color: Color) => changeColor(color.toString('hex'));
 	const wheelColor = parseColor(color).toString("hsl");
 
 	const COLOR_WHEEL_OUTER_RADIUS = 80;

src/components/Navbar/Navbar.tsx

@@ -41,7 +41,7 @@ function Navbar(): ReactNode {
 
 	const handleSaveFile = useCallback(async () => {
 		try {
-			const { layers, elements } = await prepareForSave();
+			const { layers, elements } = prepareForSave();
 
 			if (layers.length === 0) {
 				throw new Error("No layers to save. This is a bug.");

src/state/slices/canvasSlice.ts

@@ -215,7 +215,7 @@ export const createCanvasSlice: StateCreator<
 	 * elements. Therefore, the caller must save the
 	 * layers and elements themselves.
 	 */
-	async function prepareForSave(): Promise<SavedCanvasProperties> {
+	function prepareForSave(): SavedCanvasProperties {
 		const { layers, elements } = get();
 
 		return { layers, elements };
@@ -270,7 +270,7 @@ export const createCanvasSlice: StateCreator<
 		return lines;
 	}
 
-	async function prepareForExport(quality: number = 1): Promise<Blob> {
+	function prepareForExport(quality: number = 1): Promise<Blob> {
 		const accountForDPI = true; // Consider DPI for better quality exports
 
 		const substituteCanvas = document.createElement("canvas");
@@ -317,7 +317,7 @@ export const createCanvasSlice: StateCreator<
 
 	function drawCanvas(canvas: HTMLCanvasElement, layerId?: string) {
 		let elements = get().elements;
-		const { background, layers, dpi, width: canvasWidth } = get();
+		const { background, layers, dpi, width: canvasWidth, height: canvasHeight } = get();
 
 		if (layers.length === 0) {
 			throw new Error("No layers available to draw on the canvas.");
@@ -357,15 +357,14 @@ export const createCanvasSlice: StateCreator<
 
 		if (isPreviewCanvas) {
 			// If the canvas is a preview canvas, scale it down.
-			const scale = canvas.width / (canvasWidth * dpi);
+			const scaleX = canvas.width / (canvasWidth * dpi);
+			const scaleY = canvas.height / (canvasHeight * dpi);
 			// Save the current transform state.
 			ctx.save();
 
-			ctx.scale(scale, scale);
+			ctx.scale(scaleX, scaleY);
 		}
 
-		console.log("drawing...", layers, elements);
-
 		for (const element of elements) {
 			const { x, y, width, height } = element;
 
@@ -442,6 +441,9 @@ export const createCanvasSlice: StateCreator<
 			}
 		}
 
+		if (isPreviewCanvas) {
+			ctx.restore(); // Restore the previous transform state.
+		}
 		// Finally, draw the background behind all elements.
 		ctx.fillStyle = background;
 
@@ -450,16 +452,13 @@ export const createCanvasSlice: StateCreator<
 		ctx.globalCompositeOperation = "destination-over";
 		ctx.fillRect(canvasX, canvasY, canvas.width, canvas.height);
 
-		if (isPreviewCanvas) {
-			ctx.restore(); // Restore the previous transform state.
-		}
 	}
 
 	return {
 		width: 400,
 		height: 400,
 		mode: "move",
-		background: "white",
+		background: "#ffffff",
 		shape: "rectangle",
 		shapeMode: "fill",
 		color: "#000000",

src/tests/integration/ColorWheel.test.tsx

@@ -128,7 +128,7 @@ describe("ColorWheel functionality", () => {
 
 		// Assert that dispatch was called with the correct action
 		expect(preloadedState.changeColor).toHaveBeenCalledWith(
-			mockColor.toString()
+			mockColor.toString("hex")
 		);
 	});
 
@@ -139,7 +139,7 @@ describe("ColorWheel functionality", () => {
 
 		// Assert that dispatch was called with the correct action
 		expect(preloadedState.changeColor).toHaveBeenCalledWith(
-			mockColor.toString()
+			mockColor.toString('hex')
 		);
 	});
 

src/tests/unit/useStore.test.ts

@@ -8,7 +8,7 @@ import type { CanvasElement, HistoryAction, SliceStores } from "../../types";
 import { MODES } from "../../state/store";
 
 const exampleStore: SliceStores = {
-	background: "white",
+	background: "#ffffff",
 	width: 400,
 	height: 400,
 	shape: "rectangle",
@@ -402,7 +402,7 @@ describe("useStore functionality", () => {
 				result.result.current.setLayers(layers);
 				result.result.current.setElements(elements);
 			});
-			expect(result.result.current.prepareForSave()).resolves.toEqual(expected);
+			expect(result.result.current.prepareForSave()).toEqual(expected);
 		});
 
 		it("should return a blob for exporting", () => {
@@ -547,7 +547,7 @@ describe("useStore functionality", () => {
 			act(() => {
 				result.result.current.setLayers([]);
 			});
-			expect(() => result.result.current.prepareForExport()).rejects.toThrow();
+			expect(() => result.result.current.prepareForExport()).toThrow();
 		});
 	});
 

src/types/Slices.types.ts

@@ -56,7 +56,7 @@ export type CanvasStore = CanvasState & {
 	changeX: (payload: number) => void;
 	changeY: (payload: number) => void;
 	toggleReferenceWindow: () => void;
-	prepareForSave: () => Promise<SavedCanvasProperties>;
+  prepareForSave: () => SavedCanvasProperties;
 	prepareForExport: (quality?: number) => Promise<Blob>;
 	drawCanvas: (canvas: HTMLCanvasElement, layerId?: string) => void;
 };