blob: 87a3ee578c7d921146c127727e9e93a6fb71dcc3 (
plain)
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
|
<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;
}
}
</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>
|
