X-Git-Url: https://git.r.bdr.sh/rbdr/canvas/blobdiff_plain/2df937df1372359babd123d1361e702a1a4b8168..587d8fe65d61b8f7217b4e8850b44e43159c16fb:/src/lib/components/hud.svelte?ds=inline

diff --git a/src/lib/components/hud.svelte b/src/lib/components/hud.svelte
index f79658a..a115c91 100644
--- a/src/lib/components/hud.svelte
+++ b/src/lib/components/hud.svelte
@@ -1,31 +1,26 @@
 <script>
-  import { coordinateLength } from '$lib/config';
+	import { coordinateLength } from '$lib/config';
+	import { canvas } from '$lib/stores/canvas';
 
-  export let x;
-  export let y;
+	const kSeparatorRegex = /([0-9a-z]{2})/g;
 
-  const kSeparatorRegex = /([0-9a-z]{2})/g;
-
-  const formatCoordinate = function formatCoordinate(coordinate) {
-    return coordinate
-      .toString(16)
-      .padStart(coordinateLength, 0)
-      .replace(kSeparatorRegex, '$1 ');
-  }
+	const formatCoordinate = function formatCoordinate(coordinate) {
+		return coordinate.toString(16).padStart(coordinateLength, 0).replace(kSeparatorRegex, '$1 ');
+	};
 </script>
 
 <div class="hud">
-  { formatCoordinate(x) } × { formatCoordinate(y) }
+	{formatCoordinate($canvas.x)} × {formatCoordinate($canvas.y)}
 </div>
 
 <style>
-  .hud {
-    background-color: #fff;
-    padding: 4px;
-    position: fixed;
-    bottom: 2px;
-    right: 2px;
-    font-smooth: never;
-    -webkit-font-smoothing : none;
-  }
+	.hud {
+		background-color: #fff;
+		padding: 4px;
+		position: fixed;
+		bottom: 2px;
+		right: 2px;
+		font-smooth: never;
+		-webkit-font-smoothing: none;
+	}
 </style>