1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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>
|
