const width = widget.box.right - widget.box.left;
const height = widget.box.bottom - widget.box.top;
- $: renderX = widget.box.left - modulo($topLeft.x, maxSize);
- $: renderY = widget.box.top - modulo($topLeft.y, maxSize);
+ // Coordinates in canvas space are (p,q)
+ // Coordinates in screen space are (x,y)
- 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))
+ $: 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="{renderX}px"
- style:top="{renderY}px"
+ style:left="{xWidget}px"
+ style:top="{yWidget}px"
>
{widget.type}
</div>