X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Ftracker%2FCanvas.js;h=62dafe14b9896f03e2943fa766bac45806623fc3;hb=f0d1a566f5afd76ab7a56b295b71d5756dfd2bc3;hp=1258776809c000152abb72187398cf62e46f6b3b;hpb=31131fc56ecc52ba5ce8aa9854755b22620a7139;p=alttp.git

diff --git a/resources/js/components/tracker/Canvas.js b/resources/js/components/tracker/Canvas.js
index 1258776..62dafe1 100644
--- a/resources/js/components/tracker/Canvas.js
+++ b/resources/js/components/tracker/Canvas.js
@@ -56,7 +56,9 @@ const Canvas = () => {
 			if (shouldShowDungeonItem(config, 'Big')) {
 				++count;
 			}
-			return count > 2 ? LAYOUTS.manyDungeonItemsVertical : LAYOUTS.defaultVertical;
+			const compact = config.compactKeysanity && count === 4;
+			return !compact && count > 2
+				? LAYOUTS.manyDungeonItemsVertical : LAYOUTS.defaultVertical;
 		} else {
 			return LAYOUTS.defaultHorizontal;
 		}
@@ -67,22 +69,21 @@ const Canvas = () => {
 		const bbox = canvas.select('.background');
 		const start = { x: 0, y: 0 };
 		const onStart = function (e) {
-			const bounds = bbox.node().getBoundingClientRect();
 			start.x = e.x;
 			start.y = e.y;
-			setDragging({
-				icon: this.dataset['icon'],
-				x: (e.x - bounds.x) / bounds.width,
-				y: (e.y - bounds.y) / bounds.height,
-			});
 		};
 		const onDrag = function (e) {
 			const bounds = bbox.node().getBoundingClientRect();
-			setDragging({
-				icon: this.dataset['icon'],
-				x: (e.x - bounds.x) / bounds.width,
-				y: (e.y - bounds.y) / bounds.height,
-			});
+			const distance = Math.max(Math.abs(e.x - start.x), Math.abs(e.y - start.y));
+			if (distance > 5) {
+				setDragging({
+					icon: this.dataset['icon'],
+					x: (e.x - bounds.x) / bounds.width,
+					y: (e.y - bounds.y) / bounds.height,
+				});
+			} else {
+				setDragging(null);
+			}
 		};
 		const onEnd = function (e) {
 			const bounds = bbox.node().getBoundingClientRect();