Save WIP

[rbdr/canvas] / src / lib / components / widget.svelte

<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>