undo

frontend/src/lib/DrawingCanvas.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
+	import { nanoid } from 'nanoid';
 	import PxBrush from 'px-brush';
 	import { onMount } from 'svelte';
 	import type { Brush } from '../types';
-	import { selectedBrush, selectedImageBlob, currentCanvas } from '$lib/store';
+	import UndoIcon from '$lib/Icons/Undo.svelte';
+
+	import { selectedBrush, selectedImage, currentCanvas, drawingLayers } from '$lib/store';
 
 	let canvas: HTMLCanvasElement;
 	let brush: HTMLCanvasElement;
 
 	let brushCtx: CanvasRenderingContext2D;
 	let ctx: CanvasRenderingContext2D;
-	let pxBrush: PxBrush;
 	let startPosition: { x: number; y: number } = { x: 0, y: 0 };
 
 	$: {
@@ -20,28 +22,22 @@
 		}
 	}
 	$: {
-		if ($selectedImageBlob) {
-			drawImage(ctx, $selectedImageBlob);
+		if ($selectedImage) {
+			drawImage(ctx, $selectedImage);
+			$drawingLayers = new Map();
 		}
 	}
+
 	onMount(() => {
 		ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
 		brushCtx = brush.getContext('2d') as CanvasRenderingContext2D;
 		window.devicePixelRatio = 1;
-		pxBrush = new PxBrush(canvas);
 		$currentCanvas = canvas;
 		clearCanvas(ctx);
 	});
 
-	const drawImage = (ctx: CanvasRenderingContext2D, blob: Blob) => {
-		const img = new Image();
-		img.onload = function () {
-			ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
-		};
-		img.src = URL.createObjectURL(blob);
-	};
-
 	let mouseDown: boolean = false;
+	let currLayerId: string;
 	function pointerEnter() {
 		// brush.hidden = false;
 	}
@@ -53,12 +49,22 @@
 	function pointerDown(e: MouseEvent) {
 		mouseDown = true;
 		startPosition = getPosition(canvas, e);
-		pxBrush.draw({
-			from: startPosition,
-			to: startPosition,
-			size: $selectedBrush.size,
-			color: $selectedBrush.color
+		// pxBrush.draw({
+		// 	from: startPosition,
+		// 	to: startPosition,
+		// 	size: $selectedBrush.size,
+		// 	color: $selectedBrush.color
+		// });
+
+		currLayerId = nanoid();
+		drawingLayers.update((map) => {
+			map.set(currLayerId, {
+				brush: $selectedBrush,
+				points: [{ from: startPosition, to: startPosition }]
+			});
+			return map;
 		});
+		drawLayers();
 	}
 	function pointerMove(e: MouseEvent) {
 		const position = getPosition(canvas, e);
@@ -67,13 +73,23 @@
 		if (!mouseDown) {
 			return;
 		}
-		pxBrush.draw({
-			from: startPosition,
-			to: position,
-			size: $selectedBrush.size,
-			color: $selectedBrush.color
+		// pxBrush.draw({
+		// 	from: startPosition,
+		// 	to: position,
+		// 	size: $selectedBrush.size,
+		// 	color: $selectedBrush.color
+		// });
+
+		drawingLayers.update((map) => {
+			const currentLayer = map.get(currLayerId);
+			currentLayer?.points.push({
+				from: startPosition,
+				to: position
+			});
+			return map;
 		});
 		startPosition = position;
+		drawLayers();
 	}
 	function getPosition(canvas: HTMLCanvasElement, event: MouseEvent) {
 		const rect = canvas.getBoundingClientRect();
@@ -98,25 +114,72 @@
 		ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
 		ctx.fill();
 	}
+	function drawImage(ctx: CanvasRenderingContext2D, img: HTMLImageElement | HTMLCanvasElement) {
+		ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
+	}
+	function rollBack() {
+		if ($drawingLayers.size <= 0) {
+			return;
+		}
+		// clear current layer
+		const ids = Array.from($drawingLayers.keys());
+		drawingLayers.update((map) => {
+			map.delete(ids[ids.length - 1]);
+			return map;
+		});
+		drawLayers();
+	}
+	function drawLayers() {
+		const tempcanvas = document.createElement('canvas');
+		tempcanvas.width = 256;
+		tempcanvas.height = 512;
+		window.devicePixelRatio = 1;
+		const pxBrush = new PxBrush(tempcanvas);
+		clearCanvas(ctx);
+		if ($selectedImage) {
+			drawImage(ctx, $selectedImage);
+		}
+		Array.from($drawingLayers.values()).forEach((layer) => {
+			// clear temp canvas
+			layer.points.forEach((point, i) => {
+				pxBrush.draw({
+					from: point.from,
+					to: point.to,
+					size: layer.brush.size,
+					color: layer.brush.color
+				});
+			});
+		});
+		requestAnimationFrame(() => {
+			drawImage(ctx, tempcanvas);
+		});
+	}
 </script>
 
-<div class="inline-block relative overflow-clip">
-	<canvas
-		bind:this={canvas}
-		class="canvas"
-		width="256"
-		height="512"
-		on:touchmove={(e) => e.preventDefault()}
-		on:pointerenter={pointerEnter}
-		on:pointerup={pointerOut}
-		on:pointerleave={pointerOut}
-		on:pointercancel={pointerOut}
-		on:pointerout={pointerOut}
-		on:pointermove={pointerMove}
-		on:pointerdown={pointerDown}
-	/>
-	<canvas bind:this={brush} class="brush" width="10" height="10" />
-	<span class="label">{$selectedBrush?.label} </span>
+<div>
+	<div class="inline-block relative overflow-clip">
+		<canvas
+			bind:this={canvas}
+			class="canvas"
+			width="256"
+			height="512"
+			on:touchmove={(e) => e.preventDefault()}
+			on:pointerenter={pointerEnter}
+			on:pointerup={pointerOut}
+			on:pointerleave={pointerOut}
+			on:pointercancel={pointerOut}
+			on:pointerout={pointerOut}
+			on:pointermove={pointerMove}
+			on:pointerdown={pointerDown}
+		/>
+		<canvas bind:this={brush} class="brush" width="10" height="10" />
+		<span class="label">{$selectedBrush?.label} </span>
+		<button
+			class="absolute bottom-1 left-1"
+			on:click|preventDefault={() => rollBack()}
+			disabled={$drawingLayers.size <= 0}><UndoIcon /></button
+		>
+	</div>
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/Icons/Undo.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let classNames = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 512 512" class={classNames}
+	><path
+		fill="white"
+		stroke="black"
+		stroke-width="30"
+		d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"
+	/></svg
+>

frontend/src/lib/TemplateGallery.svelte

@@ -1,16 +1,31 @@
 <script lang="ts">
 	import { IMAGES_LIST } from '../data';
-	import { selectedImageBlob, generateHuman } from '$lib/store';
+	import { selectedImage, generateHuman } from '$lib/store';
 	import { base } from '$app/paths';
 
 	const submit = async (e: Event) => {
 		e.preventDefault();
 		const src = IMAGES_LIST[parseInt((e.target as HTMLInputElement).value)];
 		if (src) {
-			const blob = await fetch(base + src).then((res) => res.blob());
-			$selectedImageBlob = blob;
+			const blob = await fetch(base + src).then((res) => res.blob())
+			const img = await getImage(blob);
+			$selectedImage = img;
 		}
 	};
+
+	async function getImage(blob: Blob): Promise<HTMLImageElement> {
+		return new Promise((resolve, reject) => {
+			const img = new Image();
+			img.onload = () => {
+				URL.revokeObjectURL(img.src);
+				resolve(img);
+			};
+			img.onerror = (err) => {
+				reject(err);
+			};
+			img.src = URL.createObjectURL(blob);
+		});
+	}
 </script>
 
 <div>

frontend/src/lib/store.ts

@@ -1,10 +1,11 @@
 import { writable } from 'svelte/store';
-import type { Brush, Params } from '../types';
+import type { Brush, Params, DrawingLayer } from '../types';
 import { randomSeed } from '$lib/utils';
 
+export const drawingLayers = writable<Map<string, DrawingLayer>>(new Map());
 export const resultImage = writable<string>();
 export const currentCanvas = writable<HTMLCanvasElement>();
-export const selectedImageBlob = writable<Blob>();
+export const selectedImage = writable<HTMLImageElement>();
 export const selectedBrush = writable<Brush>();
 export const selectedParams = writable<Params>({
 	texture: '',

frontend/src/types.ts

@@ -22,3 +22,15 @@ export interface FormElements extends HTMLCollection {
 	texture1: HTMLInputElement;
 	texture2: HTMLInputElement;
 }
+interface Point {
+	x: number;
+	y: number;
+}
+interface pxPoint {
+	from: Point;
+	to: Point;
+}
+export interface DrawingLayer {
+	brush: Brush;
+	points: pxPoint[];
+}