X-Git-Url: https://git.r.bdr.sh/rbdr/canvas/blobdiff_plain/3717f7fbf9ec110b51fe002cdced5d73ebd6136b..587d8fe65d61b8f7217b4e8850b44e43159c16fb:/src/lib/components/background.svelte?ds=sidebyside

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 7664939..20b9e37 100644
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -1,35 +1,39 @@
 <script>
-  import { browser } from '$app/env';
+	import { browser } from '$app/environment';
+	import { canvas } from '$lib/stores/canvas';
 
-  export let x;
-  export let y;
+	const kDotSize = 32;
 
-  const kDotSize = 32;
-
-  $: {
-    if (browser) {
-      document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
-      document.documentElement.style.setProperty('--dot-x', kDotSize - x % kDotSize + 'px');
-      document.documentElement.style.setProperty('--dot-y', kDotSize - y % kDotSize + 'px');
-    }
-  }
+	$: {
+		if (browser) {
+			document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
+			document.documentElement.style.setProperty(
+				'--dot-x',
+				kDotSize - ($canvas.x % kDotSize) + 'px'
+			);
+			document.documentElement.style.setProperty(
+				'--dot-y',
+				kDotSize - ($canvas.y % kDotSize) + 'px'
+			);
+		}
+	}
 </script>
 
-<div class="background"></div>
+<div class="background" />
 
 <style>
-  .background {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    user-select: none;
-    pointer-events: none;
-    background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
-    background-size: var(--dot-size) var(--dot-size);
-    background-position: var(--dot-x) var(--dot-y);
-    padding: 0;
-    margin: 0;
-    width: 100vw;
-    height: 100vh;
-  }
+	.background {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		user-select: none;
+		pointer-events: none;
+		background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
+		background-size: var(--dot-size) var(--dot-size);
+		background-position: var(--dot-x) var(--dot-y);
+		padding: 0;
+		margin: 0;
+		width: 100vw;
+		height: 100vh;
+	}
 </style>