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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<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;
// Coordinates in canvas space are (p,q)
// Coordinates in screen space are (x,y)
$: xWidget = 0;
$: yWidget = 0;
$: {
const pCanvas = modulo($topLeft.x, maxSize);
const qCanvas = modulo($topLeft.y, maxSize);
const pBoundary = modulo($bottomRight.x, maxSize);
const qBoundary = modulo($bottomRight.y, maxSize);
const pWidget = widget.box.left;
const qWidget = widget.box.top;
xWidget = pWidget - pCanvas;
yWidget = qWidget - qCanvas;
if (pWidget < pCanvas &&
pWidget < pBoundary) {
xWidget = modulo(xWidget, maxSize);
}
if (qWidget < qCanvas &&
qWidget < qBoundary) {
yWidget = modulo(yWidget, 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="{xWidget}px"
style:top="{yWidget}px"
>
{widget.type}
</div>
<style>
.widget {
position: fixed;
background-color: #f0f;
border: 1px solid black;
opacity: 0.5;
}
</style>
|
