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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<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 = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
const pWidget = widget.box.left;
const qWidget = widget.box.top;
xWidget = pWidget - pCanvas;
yWidget = qWidget - qCanvas;
// Case 1: Boundary jump happens inside the box
if (pWidget < pCanvas
&& pBoundary > maxSize
&& pWidget < pBoundary - maxSize) {
xWidget = xWidget + maxSize;
}
// Case 2: Boundary jump happens to the left of the box
else if (pWidget > pCanvas
&& pBoundary < maxSize
&& pWidget > pBoundary) {
xWidget = xWidget - maxSize;
}
// Case 1: Boundary jump happens inside the box
if (qWidget < qCanvas
&& qBoundary > maxSize
&& qWidget < qBoundary - maxSize) {
yWidget = yWidget + maxSize;
}
// Case 2: Boundary jump happens above the top of the box
else if (qWidget > qCanvas
&& qBoundary < maxSize
&& qWidget > qBoundary) {
yWidget = yWidget - maxSize;
}
console.log('Max', maxSize,
'Widget Actual', widget.box.left, widget.box.top,
'Canvas WH', Math.abs($topLeft.x - $bottomRight.x), Math.abs($topLeft.y - $bottomRight.y),
'Canvas XY', $topLeft.x, $topLeft.y,
'Canvas PQ', pCanvas, qCanvas,
'Boundary XY', $bottomRight.x, $bottomRight.y,
'Boundary PQ', pBoundary, qBoundary,
'Widget Rendered', xWidget, yWidget,
'Calculated',
modulo(pWidget - pCanvas, maxSize),
modulo(qWidget - qCanvas, 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>
|
