Partially render the boxes

[rbdr/canvas] / src / lib / components / background.svelte

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 76649396725e2af54b2254b6a5e04b26e963765b..03c53774c47d0c2d7e4dd0f61897add5d32e3f34 100644 (file)
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -1,16 +1,14 @@
 <script>
   import { browser } from '$app/env';
 <script>
   import { browser } from '$app/env';

-
-  export let x;
-  export let y;
+  import { canvas } from '$lib/stores/canvas';

 
   const kDotSize = 32;
 
   $: {
     if (browser) {
       document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
 
   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');
+      document.documentElement.style.setProperty('--dot-x', kDotSize - $canvas.x % kDotSize + 'px');
+      document.documentElement.style.setProperty('--dot-y', kDotSize - $canvas.y % kDotSize + 'px');

     }
   }
 </script>
     }
   }
 </script>