add map aspect ratio WIP

mhkeller · May 23, 2020 · dfe35d9 · dfe35d9
1 parent d7e3273
commit dfe35d9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/LayerCake.svelte b/src/LayerCake.svelte
@@ -229,10 +229,13 @@
 	const zRange_d = derived([zScale_d], getRange);
 	const rRange_d = derived([rScale_d], getRange);
 
+	const aspectRatio_d = derived([width_d, height_d], ([$width, $height]) => $width / $height);
+
 	$: context = {
 		activeGetters: activeGetters_d,
 		width: width_d,
 		height: height_d,
+		aspectRatio: aspectRatio_d,
 		containerWidth: _containerWidth,
 		containerHeight: _containerHeight,
 		x: _x,
@@ -286,7 +289,11 @@
 		bind:clientWidth={containerWidth}
 		bind:clientHeight={containerHeight}
 	>
-		<slot></slot>
+		<slot
+			width={$width_d}
+			height={$height_d}
+			aspectRatio={$aspectRatio_d}
+		></slot>
 	</div>
 {/if}
 

diff --git a/src/Layouts/SvgSsr.svelte b/src/Layouts/SvgSsr.svelte
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';
 
 	export let zIndex = undefined;
+	export let viewBox = '0 0 100 100';
 	let zIndexStyle = '';
 
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
@@ -10,7 +11,7 @@
 </script>
 
 <svg
-	viewBox="0 0 100 100"
+	{viewBox}
 	preserveAspectRatio="none"
 	style="top: {$padding.top}px; right:0px; bottom:0px; left:{$padding.left}px;width:calc(100% - {($padding.left + $padding.right)}px);height:calc(100% - {($padding.top + $padding.bottom)}px);{zIndexStyle}"
 >