dragging cursor

frontend/src/lib/Frame.svelte

@@ -8,7 +8,7 @@
 	export let position = { x: 0, y: 0 };
 	export let prompt = '';
 	export let interactive = false;
-
+	export let isDragging = false;
 	$: coord = {
 		x: transform.applyX(position.x),
 		y: transform.applyY(position.y)
@@ -16,7 +16,9 @@
 </script>
 
 <div
-	class="frame z-0 flex relative {!interactive ? 'pointer-events-none touch-none' : ''}"
+	class="frame z-0 flex relative
+	{!interactive ? 'pointer-events-none touch-none' : ''}
+	{isDragging ? 'cursor-grabbing' : 'cursor-grab'}"
 	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});
 			background-image: linear-gradient(${color}, rgba(255,255,255,0));
 			color: ${color};
@@ -26,7 +28,7 @@
 	<LoadingIcon />
 	<h2 class="text-lg">Click to paint</h2>
 
-	<div class="absolute bottom-0 font-bold">{prompt}}</div>
+	<div class="absolute bottom-0 font-bold">{prompt}</div>
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/PaintFrame.svelte

@@ -23,12 +23,12 @@
 	};
 
 	let frameElement: HTMLDivElement;
-
+	let isDragging = false;
 	$: prompt = $myPresence?.currentPrompt;
 
 	onMount(() => {
 		function dragstarted(event: Event) {
-			// console.log(event);
+			isDragging = true;
 		}
 
 		function dragged(event: Event) {
@@ -41,6 +41,8 @@
 		}
 
 		function dragended(event: Event) {
+			isDragging = false;
+
 			const x = round(transform.invertX(event.x) - 512 / 2);
 			const y = round(transform.invertY(event.y) - 512 / 2);
 
@@ -57,5 +59,5 @@
 </script>
 
 <div bind:this={frameElement}>
-	<Frame {color} {position} {prompt} {transform} {interactive} />
+	<Frame {color} {position} {prompt} {transform} {isDragging} {interactive} />
 </div>