Partially render the boxes

1 files changed, 39 insertions, 0 deletions

diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
new file mode 100644
index 0000000..7d587b5
--- /dev/null
+++ b/src/lib/components/widget.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { bottomRight, topLeft } from '$lib/stores/canvas';
+  import { modulo } from '$lib/math';
+  import { maxSize } from '$lib/config';
+  export let widget;
+
+  const width = widget.box.right - widget.box.left;
+  const height = widget.box.bottom - widget.box.top;
+
+  $: renderX = widget.box.left - modulo($topLeft.x, maxSize);
+  $: renderY = widget.box.top - modulo($topLeft.y, maxSize);
+
+  console.log('Max', maxSize,
+              'Widget Actual', widget.box.left, widget.box.top,
+              'Top Left', $topLeft.x, $topLeft.y,
+              'Mod Top Left', modulo($topLeft.x, maxSize), modulo($topLeft.y, maxSize),
+              'Calculated',
+              modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
+              modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))
+
+</script>
+
+<div class="widget"
+  style:width="{width}px"
+  style:height="{height}px"
+  style:left="{renderX}px"
+  style:top="{renderY}px"
+>
+  {widget.type}
+</div>
+
+<style>
+  .widget {
+    position: fixed;
+    background-color: #f0f;
+    border: 1px solid black;
+    opacity: 0.5;
+  }
+</style>