Partially render the boxes

[rbdr/canvas] / src / routes / index.svelte

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 06c2357590d3157bf668b58e39f777df0632703a..411b81f0940ab95c33537b9bd3ace151eb0a7a88 100644 (file)
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -3,13 +3,13 @@
   import Background from '$lib/components/background.svelte';
   import Palette from '$lib/components/palette.svelte';
   import Hud from '$lib/components/hud.svelte';
+  import Widget from '$lib/components/widget.svelte';
   import { modulo } from '$lib/math';
   import { widgets } from '$lib/stores/widgets';
+  import { canvas } from '$lib/stores/canvas';
 
   import { coordinateLength, maxSize } from '$lib/config';
 
-  $: x = 0;
-  $: y = 0;
   $: shouldShowPalette = false;
 
   let dragging = false;
@@ -19,10 +19,11 @@
     if (dragging) {
       let deltaX = event.x - dragging.x;
       let deltaY = event.y - dragging.y;
-      x = modulo(x - deltaX, maxSize);
-      y = modulo(y - deltaY, maxSize);
+      let x = modulo($canvas.x - deltaX, maxSize);
+      let y = modulo($canvas.y - deltaY, maxSize);
       dragging.x = event.x;
       dragging.y = event.y;
+      canvas.set({ x, y })
     }
   }
 
@@ -59,15 +60,19 @@
   on:mouseup={stopDragging}
   on:mousemove={moveCanvas}
 >
-  <Sensor x={x} y={y} />
-  <Background x={x} y={y} />
-  <Hud x={x} y={y} />
+  <Sensor />
+  <Background />
+  <Hud />
 
   {#if shouldShowPalette }
     <Palette/>
   {/if}
 
-  <p>{JSON.stringify($widgets)}</p>
+  {#if $widgets}
+    {#each $widgets as widget}
+      <Widget widget={widget}/>
+    {/each}
+  {/if}
 </div>
 
 <style>