better drag target

frontend/src/app.d.ts

@@ -17,5 +17,6 @@ declare global {
 		transform: ZoomTransform;
 		x: number;
 		y: number;
+		sourceEvent: PointerEvent | MouseEvent | TouchEvent
 	}
 }

frontend/src/lib/Cursor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { ZoomTransform } from 'd3-zoom';
-
+	import Cursor from '$lib/Icons/Cursor.svelte';
 	export let transform: ZoomTransform;
 	export let color = '';
 	export let emoji: string;
@@ -16,18 +16,8 @@
 	class="cursor"
 	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});`}
 >
-	<svg
-		class="block z-0 col-span-2 row-span-2"
-		width="40"
-		viewBox="0 0 15 15"
-		fill="currentColor"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			d="M0.91603 0.916054L7.09131 14.9234L8.89871 8.89873L14.9234 7.09133L0.91603 0.916054Z"
-			fill="#FFB800"
-		/>
-	</svg>
+	<Cursor classList={'block z-0 col-span-2 row-span-2'} />
+
 	{#if emoji}
 		<div
 			class="absolute right-0 text-4xl col-start-2 row-start-2"

frontend/src/lib/Icons/Cursor.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	width="40"
+	viewBox="0 0 15 15"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M0.91603 0.916054L7.09131 14.9234L8.89871 8.89873L14.9234 7.09133L0.91603 0.916054Z"
+		fill="#FFB800"
+	/>
+</svg>

frontend/src/lib/Icons/Move.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	width="11"
+	height="11"
+	viewBox="0 0 11 11"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M2.4 4.26667L1 5.66667L2.4 7.06667M4.26667 2.4L5.66667 1L7.06667 2.4M7.06667 8.93333L5.66667 10.3333L4.26667 8.93333M8.93333 4.26667L10.3333 5.66667L8.93333 7.06667M1 5.66667H10.3333M5.66667 1V10.3333"
+		stroke="#397DFF"
+		stroke-width="0.933333"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

frontend/src/lib/PaintFrame.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Frame from '$lib/Frame.svelte';
+	import Move from '$lib/Icons/Move.svelte';
 	import { drag } from 'd3-drag';
 	import { select } from 'd3-selection';
 	import { round } from '$lib/utils';
@@ -25,14 +26,24 @@
 	$: prompt = $myPresence?.currentPrompt;
 	$: isLoading = $myPresence?.isLoading || false;
 
+	let offsetX = 0;
+	let offsetY = 0;
 	onMount(() => {
-		function dragstarted() {
+		function dragstarted(event: Event) {
+			const rect = (event.sourceEvent.target as HTMLElement).getBoundingClientRect();
+			if (event.sourceEvent instanceof TouchEvent) {
+				offsetX = event.sourceEvent.targetTouches[0].pageX - rect.left;
+				offsetY = event.sourceEvent.targetTouches[0].pageY - rect.top;
+			} else {
+				offsetX = event.sourceEvent.pageX - rect.left;
+				offsetY = event.sourceEvent.pageY - rect.top;
+			}
 			isDragging = true;
 		}
 
 		function dragged(event: Event) {
-			const x = round(transform.invertX(event.x)) - 256;
-			const y = round(transform.invertY(event.y)) - 256;
+			const x = round(transform.invertX(event.x - offsetX));
+			const y = round(transform.invertY(event.y - offsetY));
 			position = {
 				x,
 				y
@@ -48,8 +59,8 @@
 		function dragended(event: Event) {
 			isDragging = false;
 
-			const x = round(transform.invertX(event.x)) - 256;
-			const y = round(transform.invertY(event.y)) - 256;
+			const x = round(transform.invertX(event.x - offsetX));
+			const y = round(transform.invertY(event.y - offsetY));
 
 			myPresence.update({
 				frame: {