Dragging

src/lib/Canvas.svelte

@@ -4,18 +4,17 @@
 
 	let container: HTMLDivElement;
 	let isPanning = false;
+	let hasPanned = false;
 	let lastX = 0;
 	let lastY = 0;
 
 	function handleMouseDown(e: MouseEvent) {
-		if (e.button === 1 || (e.button === 0 && e.shiftKey)) {
+		if (e.button === 1 || (e.button === 0 && (e.shiftKey || e.target === container))) {
 			isPanning = true;
+			hasPanned = false;
 			lastX = e.clientX;
 			lastY = e.clientY;
 			e.preventDefault();
-		} else if (e.button === 0 && e.target === container) {
-			state.select(null);
-			state.focus(null);
 		}
 	}
 
@@ -23,12 +22,17 @@
 		if (!isPanning) return;
 		const dx = e.clientX - lastX;
 		const dy = e.clientY - lastY;
+		if (dx !== 0 || dy !== 0) hasPanned = true;
 		lastX = e.clientX;
 		lastY = e.clientY;
 		state.pan(dx, dy);
 	}
 
-	function handleMouseUp() {
+	function handleMouseUp(e: MouseEvent) {
+		if (isPanning && !hasPanned && e.target === container) {
+			state.select(null);
+			state.focus(null);
+		}
 		isPanning = false;
 	}