]> git.r.bdr.sh - rbdr/canvas/blob - src/lib/components/widget.svelte
7d587b585048cd62698647eaa34df1d841fbee1a
[rbdr/canvas] / src / lib / components / widget.svelte
1 <script>
2 import { bottomRight, topLeft } from '$lib/stores/canvas';
3 import { modulo } from '$lib/math';
4 import { maxSize } from '$lib/config';
5 export let widget;
6
7 const width = widget.box.right - widget.box.left;
8 const height = widget.box.bottom - widget.box.top;
9
10 $: renderX = widget.box.left - modulo($topLeft.x, maxSize);
11 $: renderY = widget.box.top - modulo($topLeft.y, maxSize);
12
13 console.log('Max', maxSize,
14 'Widget Actual', widget.box.left, widget.box.top,
15 'Top Left', $topLeft.x, $topLeft.y,
16 'Mod Top Left', modulo($topLeft.x, maxSize), modulo($topLeft.y, maxSize),
17 'Calculated',
18 modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
19 modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))
20
21 </script>
22
23 <div class="widget"
24 style:width="{width}px"
25 style:height="{height}px"
26 style:left="{renderX}px"
27 style:top="{renderY}px"
28 >
29 {widget.type}
30 </div>
31
32 <style>
33 .widget {
34 position: fixed;
35 background-color: #f0f;
36 border: 1px solid black;
37 opacity: 0.5;
38 }
39 </style>