mask and canvas as global state

frontend/src/lib/App.svelte

@@ -8,7 +8,7 @@
 	import { COLORS, EMOJIS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
 	import type { PromptImgObject, PromptImgKey, Presence } from '$lib/types';
-	import { loadingState, currZoomTransform } from '$lib/store';
+	import { loadingState, currZoomTransform, maskEl } from '$lib/store';
 
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
 
@@ -45,8 +45,6 @@
 	$: isPrompting = $myPresence?.isPrompting || false;
 	$: isLoading = $myPresence?.isLoading || false;
 
-	let canvasEl: HTMLCanvasElement;
-
 	function onPaintMode(e: CustomEvent) {
 		const mode = e.detail.mode;
 		if (mode == 'paint' && !isPrompting) {
@@ -67,21 +65,21 @@
 	}
 
 	function getImageCrop(cursor: { x: number; y: number }) {
-		const canvasCrop = document.createElement('canvas');
-
-		canvasCrop.width = 512;
-		canvasCrop.height = 512;
+		// const canvasCrop = document.createElement('canvas');
 
-		const ctxCrop = canvasCrop.getContext('2d') as CanvasRenderingContext2D;
+		// canvasCrop.width = 512;
+		// canvasCrop.height = 512;
 
-		// crop image from point canvas
-		ctxCrop.save();
-		ctxCrop.clearRect(0, 0, 512, 512);
-		ctxCrop.globalCompositeOperation = 'source-over';
-		ctxCrop.drawImage(canvasEl, cursor.x, cursor.y, 512, 512, 0, 0, 512, 512);
-		ctxCrop.restore();
+		// const ctxCrop = canvasCrop.getContext('2d') as CanvasRenderingContext2D;
 
-		const base64Crop = canvasCrop.toDataURL('image/png');
+		// // crop image from point canvas
+		// ctxCrop.save();
+		// ctxCrop.clearRect(0, 0, 512, 512);
+		// ctxCrop.globalCompositeOperation = 'source-over';
+		// ctxCrop.drawImage($maskEl, cursor.x, cursor.y, 512, 512, 0, 0, 512, 512);
+		// ctxCrop.restore();
+		
+		const base64Crop = $maskEl.toDataURL('image/png');
 
 		return base64Crop;
 	}
@@ -193,7 +191,7 @@
 	<PromptModal on:prompt={onPrompt} on:close={onClose} />
 {/if}
 <div class="fixed top-0 left-0 z-0 w-screen h-screen">
-	<PaintCanvas bind:canvasEl />
+	<PaintCanvas />
 
 	<main class="z-10 relative">
 		<PaintFrame

frontend/src/lib/Buttons/UndoButton.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Undo from '$lib/Icons/Undo.svelte';
+	export let isActive = false;
+</script>
+
+<button
+	on:click
+	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
+	title="Clear Masking"
+>
+	<Undo />
+</button>
+
+<style lang="postcss" scoped>
+</style>

frontend/src/lib/Icons/Undo.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	width="20"
+	height="19"
+	viewBox="0 0 10 9"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g opacity="0.5">
+		<path
+			d="M6.33333 2.66667H2.27167L3.46733 1.47133L3 1L1 3L3 5L3.46733 4.52833L2.27267 3.33333H6.33333C6.86377 3.33333 7.37247 3.54405 7.74755 3.91912C8.12262 4.29419 8.33333 4.8029 8.33333 5.33333C8.33333 5.86377 8.12262 6.37247 7.74755 6.74755C7.37247 7.12262 6.86377 7.33333 6.33333 7.33333H3.66667V8H6.33333C7.04058 8 7.71885 7.71905 8.21895 7.21895C8.71905 6.71885 9 6.04058 9 5.33333C9 4.62609 8.71905 3.94781 8.21895 3.44772C7.71885 2.94762 7.04058 2.66667 6.33333 2.66667Z"
+			fill="black"
+			stroke="black"
+			stroke-width="0.5"
+			stroke-linejoin="round"
+		/>
+	</g>
+</svg>

frontend/src/lib/PaintCanvas.svelte

@@ -3,7 +3,7 @@
 	import { select } from 'd3-selection';
 	import { onMount } from 'svelte';
 	import { PUBLIC_UPLOADS } from '$env/static/public';
-	import { currZoomTransform } from '$lib/store';
+	import { currZoomTransform, canvasEl } from '$lib/store';
 	import { round } from '$lib/utils';
 
 	import { useMyPresence, useObject } from '$lib/liveblocks';
@@ -15,8 +15,6 @@
 	const height = 512 * 4;
 	const width = 512 * 4;
 
-	export let canvasEl: HTMLCanvasElement = document.createElement('canvas');
-
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;
 
@@ -53,14 +51,14 @@
 			.tapDistance(10)
 			.on('zoom', zoomed);
 
-		const selection = select(canvasEl.parentElement)
+		const selection = select($canvasEl.parentElement)
 			.call(zoomHandler as any)
 			.call(zoomHandler.transform as any, zoomIdentity)
 			.call(zoomHandler.scaleTo as any, 1 / scale)
 			.on('pointermove', handlePointerMove)
 			.on('pointerleave', handlePointerLeave);
 
-		canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
+		canvasCtx = $canvasEl.getContext('2d') as CanvasRenderingContext2D;
 		function zoomReset() {
 			const scale =
 				(width + padding * 2) /
@@ -108,7 +106,7 @@
 	}
 	function zoomed(e: Event) {
 		const transform = ($currZoomTransform = e.transform);
-		canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
+		$canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
 	}
 
 	// Update cursor presence to current pointer location
@@ -137,7 +135,7 @@
 	bind:this={containerEl}
 	class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-gray-800"
 >
-	<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0 bg-white" />
+	<canvas bind:this={$canvasEl} {width} {height} class="absolute top-0 left-0 bg-white" />
 	<slot />
 </div>
 

frontend/src/lib/PaintFrame.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-	import Frame from '$lib/Frame.svelte';
 	import PPButton from '$lib/Buttons/PPButton.svelte';
 	import DragButton from '$lib/Buttons/DragButton.svelte';
 	import MaskButton from '$lib/Buttons/MaskButton.svelte';
+	import UndoButton from '$lib/Buttons/UndoButton.svelte';
 	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
 
 	import { drag } from 'd3-drag';
-	import { select } from 'd3-selection';
+	import { select, type Selection } from 'd3-selection';
 	import { round } from '$lib/utils';
 
 	import type { ZoomTransform } from 'd3-zoom';
 	import { onMount, createEventDispatcher } from 'svelte';
 
 	import { useMyPresence } from '$lib/liveblocks';
-	import { loadingState } from '$lib/store';
+	import { loadingState, canvasEl, maskEl } from '$lib/store';
+
+	import { toggle_class } from 'svelte/internal';
 	const myPresence = useMyPresence();
 
 	const dispatch = createEventDispatcher();
@@ -22,6 +24,8 @@
 	export let color = 'black';
 	export let interactive = false;
 
+	let maskCtx: CanvasRenderingContext2D;
+
 	let position = {
 		x: 768,
 		y: 768
@@ -40,7 +44,67 @@
 
 	let offsetX = 0;
 	let offsetY = 0;
+
+	function cropCanvas(cursor: { x: number; y: number }) {
+		maskCtx.save();
+		maskCtx.clearRect(0, 0, 512, 512);
+		maskCtx.globalCompositeOperation = 'source-over';
+		maskCtx.drawImage($canvasEl, cursor.x, cursor.y, 512, 512, 0, 0, 512, 512);
+		maskCtx.restore();
+	}
+	function drawCircle(cursor: { x: number; y: number }) {
+		maskCtx.save();
+		maskCtx.globalCompositeOperation = 'destination-out';
+		maskCtx.beginPath();
+		maskCtx.arc(cursor.x, cursor.y, 20, 0, 2 * Math.PI);
+		maskCtx.fill();
+		maskCtx.restore();
+	}
+
 	onMount(() => {
+		maskCtx = $maskEl.getContext('2d') as CanvasRenderingContext2D;
+
+		select(frameElement)
+			.call(dragMoveHandler() as any)
+			.call(cursorUpdate);
+		select($maskEl).call(maskingHandler() as any);
+	});
+
+	function cursorUpdate(selection: Selection) {
+		function handlePointerMove(event: PointerEvent) {
+			myPresence.update({
+				cursor: {
+					x: transform.invertX(event.clientX),
+					y: transform.invertY(event.clientY)
+				}
+			});
+		}
+		function handlePointerLeave() {
+			myPresence.update({
+				cursor: null
+			});
+		}
+		return selection.on('pointermove', handlePointerMove).on('pointerleave', handlePointerLeave);
+	}
+	function maskingHandler() {
+		function dragstarted(event: Event) {
+			const x = event.x / transform.k;
+			const y = event.y / transform.k;
+		}
+
+		function dragged(event: Event) {
+			const x = event.x / transform.k;
+			const y = event.y / transform.k;
+			drawCircle({ x, y });
+		}
+
+		function dragended(event: Event) {
+			const x = event.x / transform.k;
+			const y = event.y / transform.k;
+		}
+		return drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
+	}
+	function dragMoveHandler() {
 		function dragstarted(event: Event) {
 			const rect = (event.sourceEvent.target as HTMLElement).getBoundingClientRect();
 			if (event.sourceEvent instanceof TouchEvent) {
@@ -66,6 +130,7 @@
 					y: transform.invertY(event.y)
 				}
 			});
+			cropCanvas({ x, y });
 		}
 
 		function dragended(event: Event) {
@@ -73,6 +138,7 @@
 
 			const x = round(transform.invertX(event.x - offsetX));
 			const y = round(transform.invertY(event.y - offsetY));
+			cropCanvas({ x, y });
 
 			myPresence.update({
 				frame: {
@@ -81,28 +147,14 @@
 				}
 			});
 		}
-		function handlePointerMove(event: PointerEvent) {
-			myPresence.update({
-				cursor: {
-					x: transform.invertX(event.clientX),
-					y: transform.invertY(event.clientY)
-				}
-			});
-		}
-		function handlePointerLeave() {
-			myPresence.update({
-				cursor: null
-			});
-		}
-		const dragHandler = drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
-		select(frameElement)
-			.call(dragHandler as any)
-			.on('pointermove', handlePointerMove)
-			.on('pointerleave', handlePointerLeave);
-	});
-
-	function DragMask() {
-		dragEnabled = !dragEnabled;
+		return drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
+	}
+	function toggleDrag() {
+		dragEnabled = true;
+	}
+	function toggleMask() {
+		dragEnabled = false;
+		cropCanvas(position);
 	}
 </script>
 
@@ -112,6 +164,12 @@
 		style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); border-color: ${color}; transform-origin: 0 0;`}
 	>
 		<div class="frame">
+			<canvas
+				class={dragEnabled || isLoading ? '' : 'bg-white'}
+				bind:this={$maskEl}
+				width="512"
+				height="512"
+			/>
 			<div class="pointer-events-none touch-none">
 				{#if $loadingState}
 					<div class="col-span-2 row-start-1">
@@ -128,15 +186,21 @@
 				<div class="absolute bottom-0 font-bold text-lg">{prompt}</div>
 			</div>
 			{#if !isDragging}
-				<div class="absolute top-full">
+				<div class="absolute top-full ">
 					<div class="py-2">
 						<PPButton on:click={() => dispatch('paintMode', { mode: 'paint' })} />
 					</div>
 				</div>
 				<div class="absolute left-full bottom-0">
-					<div class="px-2 flex flex-col gap-2">
-						<DragButton isActive={dragEnabled} on:click={() => (dragEnabled = true)} />
-						<MaskButton isActive={!dragEnabled} on:click={() => (dragEnabled = false)} />
+					<div class="px-2">
+						<DragButton isActive={dragEnabled} on:click={toggleDrag} />
+						<div class="flex bg-white rounded-full mt-3">
+							<MaskButton isActive={!dragEnabled} on:click={toggleMask} />
+							{#if !dragEnabled}
+								<span class="border-gray-800 border-opacity-50 border-r-2 my-2" />
+								<UndoButton on:click={() => {}} />
+							{/if}
+						</div>
 					</div>
 				</div>
 			{/if}
@@ -144,15 +208,15 @@
 	</div>
 	<div
 		bind:this={frameElement}
-		class="absolute top-0 left-0 w-[512px] h-[512px] border-2 border-black
+		class="absolute top-0 left-0 w-[512px] h-[512px] ring-2 ring-black
 		{isDragging ? 'cursor-grabbing' : 'cursor-grab'}
 		{dragEnabled ? 'block' : 'hidden'}"
-		style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); border-color: ${color}; transform-origin: 0 0;`}
+		style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
 	/>
 </div>
 
 <style lang="postcss" scoped>
 	.frame {
-		@apply relative grid grid-cols-3 grid-rows-3 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
+		@apply relative grid grid-cols-3 grid-rows-3 ring-2 ring-blue-500 w-[512px] h-[512px];
 	}
 </style>

frontend/src/lib/store.ts

@@ -3,4 +3,5 @@ import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
 
 export const loadingState = writable<string>('');
 export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
-
+export const canvasEl = writable<HTMLCanvasElement>();
+export const maskEl = writable<HTMLCanvasElement>();