update range

mhkeller · May 24, 2020 · 44c546c · 44c546c
1 parent 3ff96ca
commit 44c546c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/src/LayerCake.svelte b/src/LayerCake.svelte
@@ -14,7 +14,8 @@
 	export let ssr = false;
 	export let pointerEvents = true;
 	export let position = 'relative';
-	export let percentScale = false;
+	export let percentRange = false;
+	export let aspectRatio = undefined;
 
 	export let width = undefined;
 	export let height = undefined;
@@ -85,7 +86,8 @@
 	 * Make store versions of each parameter
 	 * Prefix these with `_` to keep things organized
 	 */
-	const _percentScale = writable();
+	const _aspectRatio = writable();
+	const _percentRange = writable();
 	const _containerWidth = writable();
 	const _containerHeight = writable();
 	const _x = writable();
@@ -122,7 +124,8 @@
 	const _flatData = writable();
 	const _originalSettings = writable(originalSettings);
 
-	$: _percentScale.set(percentScale);
+	$: _aspectRatio.set(aspectRatio);
+	$: _percentRange.set(percentRange);
 	$: _containerWidth.set(containerWidth);
 	$: _containerHeight.set(containerHeight);
 	$: _x.set(makeAccessor(x));
@@ -215,30 +218,32 @@
 	const zDomain_d = derived([extents_d, _zDomain], calcDomain('z'));
 	const rDomain_d = derived([extents_d, _rDomain], calcDomain('r'));
 
-	const xScale_d = derived([_xScale, extents_d, xDomain_d, _xPadding, _xNice, _xReverse, width_d, height_d, _xRange, _percentScale], createScale('x'));
+	const xScale_d = derived([_xScale, extents_d, xDomain_d, _xPadding, _xNice, _xReverse, width_d, height_d, _xRange, _percentRange], createScale('x'));
 	const xGet_d = derived([_x, xScale_d], createGetter);
 
-	const yScale_d = derived([_yScale, extents_d, yDomain_d, _yPadding, _yNice, _yReverse, width_d, height_d, _yRange, _percentScale], createScale('y'));
+	const yScale_d = derived([_yScale, extents_d, yDomain_d, _yPadding, _yNice, _yReverse, width_d, height_d, _yRange, _percentRange], createScale('y'));
 	const yGet_d = derived([_y, yScale_d], createGetter);
 
-	const zScale_d = derived([_zScale, extents_d, zDomain_d, _zPadding, _zNice, _zReverse, width_d, height_d, _zRange, _percentScale], createScale('z'));
+	const zScale_d = derived([_zScale, extents_d, zDomain_d, _zPadding, _zNice, _zReverse, width_d, height_d, _zRange, _percentRange], createScale('z'));
 	const zGet_d = derived([_z, zScale_d], createGetter);
 
-	const rScale_d = derived([_rScale, extents_d, rDomain_d, _rPadding, _rNice, _rReverse, width_d, height_d, _rRange, _percentScale], createScale('r'));
+	const rScale_d = derived([_rScale, extents_d, rDomain_d, _rPadding, _rNice, _rReverse, width_d, height_d, _rRange, _percentRange], createScale('r'));
 	const rGet_d = derived([_r, rScale_d], createGetter);
 
 	const xRange_d = derived([xScale_d], getRange);
 	const yRange_d = derived([yScale_d], getRange);
 	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);
+	const aspectRatio_d = derived([_aspectRatio, width_d, height_d], ([$aspectRatio, $width, $height]) => {
+		return $width / $height;
+	});
 
 	$: context = {
 		activeGetters: activeGetters_d,
 		width: width_d,
 		height: height_d,
-		percentScale: _percentScale,
+		percentRange: _percentRange,
 		aspectRatio: aspectRatio_d,
 		containerWidth: _containerWidth,
 		containerHeight: _containerHeight,
@@ -301,7 +306,7 @@
 			width={$width_d}
 			height={$height_d}
 			aspectRatio={$aspectRatio_d}
-			percentScale={_percentScale}
+			percentRange={_percentRange}
 			containerWidth={$_containerWidth}
 			containerHeight={$_containerHeight}
 		></slot>

diff --git a/src/settings/getDefaultRange.js b/src/settings/getDefaultRange.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-nested-ternary */
-function calcBaseRange(s, width, height, reverse, percentScale) {
+function calcBaseRange(s, width, height, reverse, percentRange) {
 	let min;
 	let max;
-	if (percentScale === true) {
+	if (percentRange === true) {
 		min = 0;
 		max = 100;
 	} else {
@@ -12,9 +12,9 @@ function calcBaseRange(s, width, height, reverse, percentScale) {
 	return reverse === true ? [max, min] : [min, max];
 }
 
-export default function getDefaultRange(s, width, height, reverse, range, percentScale) {
+export default function getDefaultRange(s, width, height, reverse, range, percentRange) {
 	return !range
-		? calcBaseRange(s, width, height, reverse, percentScale)
+		? calcBaseRange(s, width, height, reverse, percentRange)
 		: typeof range === 'function'
 			? range({ width, height })
 			: range;

diff --git a/test/getDefaultRange.js b/test/getDefaultRange.js
@@ -28,15 +28,15 @@ const tests = [
 	{ args: ['r', w, h, !defaultReverses.r], expected: [25, 1] },
 
 	/* --------------------------------------------
-	 * Set percent scale
+	 * Set percent range
 	 */
 	{ args: ['x', w, h, defaultReverses.x, null, true], expected: [0, 100] },
 	{ args: ['y', w, h, defaultReverses.y, null, true], expected: [100, 0] },
 	{ args: ['z', w, h, defaultReverses.z, null, true], expected: [0, 100] },
 	{ args: ['r', w, h, defaultReverses.r, null, true], expected: [0, 100] },
 
 	/* --------------------------------------------
-	 * Reverse percent scale
+	 * Reverse percent range
 	 */
 	{ args: ['x', w, h, !defaultReverses.x, null, true], expected: [100, 0] },
 	{ args: ['y', w, h, !defaultReverses.y, null, true], expected: [0, 100] },
@@ -52,7 +52,7 @@ const tests = [
 	{ args: ['r', w, h, false, [-100, 100]], expected: [-100, 100] },
 
 	/* --------------------------------------------
-	 * Manual default overrides percentScale = true
+	 * Manual default overrides percentRange = true
 	 */
 	{ args: ['x', w, h, false, [-100, 100], true], expected: [-100, 100] },
 	{ args: ['y', w, h, false, [-100, 100], true], expected: [-100, 100] },