From c46fae42ebc44a14d89e265ebe8d7dc8b18f0fa7 Mon Sep 17 00:00:00 2001
From: mhkeller <code@mhkeller.com>
Date: Sun, 31 May 2020 19:03:55 -0400
Subject: [PATCH] update fixedAspectRatio

---
 src/LayerCake.svelte         | 5 +----
 src/Layouts/ScaledSvg.svelte | 5 +++++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/LayerCake.svelte b/src/LayerCake.svelte
index 62034468..e2777d2d 100644
--- a/src/LayerCake.svelte
+++ b/src/LayerCake.svelte
@@ -15,7 +15,6 @@
 	export let pointerEvents = true;
 	export let position = 'relative';
 	export let percentRange = false;
-	export let aspectRatio = undefined;
 
 	export let width = undefined;
 	export let height = undefined;
@@ -86,7 +85,6 @@
 	 * Make store versions of each parameter
 	 * Prefix these with `_` to keep things organized
 	 */
-	const _aspectRatio = writable();
 	const _percentRange = writable();
 	const _containerWidth = writable();
 	const _containerHeight = writable();
@@ -124,7 +122,6 @@
 	const _flatData = writable();
 	const _originalSettings = writable(originalSettings);
 
-	$: _aspectRatio.set(aspectRatio);
 	$: _percentRange.set(percentRange);
 	$: _containerWidth.set(containerWidth);
 	$: _containerHeight.set(containerHeight);
@@ -235,7 +232,7 @@
 	const zRange_d = derived([zScale_d], getRange);
 	const rRange_d = derived([rScale_d], getRange);
 
-	const aspectRatio_d = derived([_aspectRatio, width_d, height_d], ([$aspectRatio, $width, $height]) => {
+	const aspectRatio_d = derived([width_d, height_d], ([$aspectRatio, $width, $height]) => {
 		return $width / $height;
 	});
 
diff --git a/src/Layouts/ScaledSvg.svelte b/src/Layouts/ScaledSvg.svelte
index 20e55f7c..95e2da9d 100644
--- a/src/Layouts/ScaledSvg.svelte
+++ b/src/Layouts/ScaledSvg.svelte
@@ -4,6 +4,7 @@
 	export let viewBox = '0 0 100 100';
 	export let zIndex = undefined;
 	export let pointerEvents = undefined;
+	export let fixedAspectRatio = undefined;
 
 	let zIndexStyle = '';
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
@@ -12,6 +13,10 @@
 	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
 
 	const { padding } = getContext('LayerCake');
+
+	$: if (fixedAspectRatio) {
+		viewBox = `0 0 100 ${100 / fixedAspectRatio}`
+	}
 </script>
 
 <svg