X-Git-Url: https://git.r.bdr.sh/rbdr/canvas/blobdiff_plain/e4e4b5202bf0039127f591941fddc1ff5ca09897..HEAD:/src/lib/components/widget.svelte?ds=sidebyside

diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
index 907a016..87a3ee5 100644
--- a/src/lib/components/widget.svelte
+++ b/src/lib/components/widget.svelte
@@ -1,89 +1,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;
-    }
-
-
-    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))
-
-  }
-
+	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"
+<div
+	class="widget"
+	style:width="{width}px"
+	style:height="{height}px"
+	style:left="{xWidget}px"
+	style:top="{yWidget}px"
 >
-  {widget.type}
+	{widget.type}
 </div>
 
 <style>
-  .widget {
-    position: fixed;
-    background-color: #f0f;
-    border: 1px solid black;
-    opacity: 0.5;
-  }
+	.widget {
+		position: fixed;
+		background-color: #f0f;
+		border: 1px solid black;
+		opacity: 0.5;
+	}
 </style>