remove spring

frontend/src/lib/App.svelte

@@ -132,7 +132,6 @@
 					position={$imagesList.get(i).position}
 					images={$imagesList.get(i).images}
 					transform={$currZoomTransform}
-					dumped={false}
 				/>
 			{/each}
 		{/if}

frontend/src/lib/Canvas.svelte

@@ -40,13 +40,9 @@
 			.on('click', () => {
 				$isPrompting = true;
 				$clickedPosition = $myPresence.cursor;
-				console.log($clickedPosition);
 			});
 
 		canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
-		canvasCtx.fillStyle = 'red';
-		canvasCtx.rect(10, 10, 160, 90);
-		canvasCtx.fill();
 		canvasCtx.strokeStyle = 'blue';
 		canvasCtx.lineWidth = 10;
 		canvasCtx.strokeRect(0, 0, width, height);
@@ -72,9 +68,6 @@
 		// const y = Math.round(event.layerY / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), 100);
 		// const x = round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), grid);
 		// const y = round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), grid);
-
-		console.log(x, y);
-
 		$myPresence = {
 			cursor: {
 				x,

frontend/src/lib/Cursor.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { spring } from 'svelte/motion';
-
 	import type { ZoomTransform } from 'd3-zoom';
 
 	export let transform: ZoomTransform;
@@ -8,21 +6,15 @@
 	export let emoji = '';
 	export let position = { x: 0, y: 0 };
 
-	// Spring animation for cursor
-	const coords = spring(position, {
-		stiffness: 0.07,
-		damping: 0.35
-	});
-	// Update spring when x and y change
-	$: coords.set({
+	$: coord = {
 		x: transform.applyX(position.x),
 		y: transform.applyY(position.y)
-	});
+	};
 </script>
 
 <div
 	class="cursor"
-	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k});`}
+	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});`}
 >
 	<svg
 		class="block z-0 col-span-2 row-span-2"

frontend/src/lib/Frame.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { spring } from 'svelte/motion';
 	import LoadingIcon from '$lib/LoadingIcon.svelte';
 
 	import type { ZoomTransform } from 'd3-zoom';
@@ -8,30 +7,16 @@
 	export let color = '';
 	export let position = { x: 0, y: 0 };
 	export let images: string[];
-	export let dumped: boolean = true;
 
-	// Spring animation for cursor
-	const coords = spring(position, {
-		stiffness: 0.07,
-		damping: 0.35
-	});
-	// Update spring when x and y change
-	$: coords.set({
+	$: coord = {
 		x: transform.applyX(position.x),
 		y: transform.applyY(position.y)
-	});
-
-	$: ncoord = dumped
-		? $coords
-		: {
-				x: transform.applyX(position.x),
-				y: transform.applyY(position.y)
-		  };
+	};
 </script>
 
 <div
 	class="frame z-0 flex relative"
-	style={`transform: translateX(${ncoord.x}px) translateY(${ncoord.y}px) scale(${transform.k});
+	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};
 	`}

frontend/src/lib/store.ts

@@ -39,13 +39,16 @@ export function createPresenceStore(room: Room) {
 }
 
 export async function createStorageStore(room: Room) {
-	const { root } = await room.getStorage();
-
-	const _imagesList = root.get('imagesList');
-
-	imagesList.set(_imagesList);
-
-	room.subscribe(_imagesList, () => {
-		imagesList.update((_) => _imagesList);
-	});
+	try {
+		const { root } = await room.getStorage();
+
+		const _imagesList = root.get('imagesList');
+
+		imagesList.set(_imagesList);
+		room.subscribe(_imagesList, () => {
+			imagesList.update((_) => _imagesList);
+		});
+	} catch (e) {
+		console.log(e);
+	}
 }

frontend/src/routes/+page.svelte

@@ -30,6 +30,9 @@
 			},
 			initialStorage: { imagesList: new LiveList() }
 		});
+		const unsubscribe = room.subscribe('error', (error) => {
+			console.error('error', error);
+		});
 
 		const unsubscribePresence = createPresenceStore(room);
 		createStorageStore(room);