Omni x/y zoom

Add some extra edge case checks Make it actually, you know, work Split omni opts into a bool and a num Change interface to uni
leeoniya · May 15, 2020 · f7e9c04 · f7e9c04
1 parent abacd02
commit f7e9c04
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 2 deletions.
diff --git a/demos/zoom-variations.html b/demos/zoom-variations.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>Zoom Variations</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../dist/uPlot.min.css">
+	<style>
+		.uplot {
+			display: inline-block;
+			width: 800px;
+		}
+	</style>
+</head>
+
+<body>
+	<script src="../dist/uPlot.iife.js"></script>
+	<script>
+		let xs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
+		let vals = [-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+		let data = [
+			xs,
+			xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)])
+		];
+
+		const opts = (title, dragOpts) => ({
+			title: title,
+			width: 800,
+			height: 600,
+			scales: {
+				x: {
+					time: false,
+				},
+			},
+			cursor: {
+				drag: dragOpts
+			},
+			series: [
+				{},
+				{
+					stroke: "purple"
+				}
+			],
+		});
+
+		let variations = [
+			['X only', { x: true, y: false }],
+			['Y only', { x: false, y: true }],
+			['X / Y', { x: true, y: true }],
+			['X / Y Unidirectional Threshold 0 (Same as X / Y)', { x: true, y: true, uni: 0 }],
+			['X / Y Unidirectional Threshold 50', { x: true, y: true, uni: 50 }],
+			['X / Y Unidirectional Threshold Infinity', { x: true, y: true, uni: Infinity }]
+		];
+
+		variations.forEach((variation) => new uPlot(opts(...variation), data, document.body));
+	</script>
+</body>
+
+</html>
diff --git a/dist/uPlot.esm.d.ts b/dist/uPlot.esm.d.ts
@@ -233,6 +233,7 @@ declare namespace uPlot {
 			setScale?: boolean; // true
 			x?: boolean; // true
 			y?: boolean; // false
+			uni?: number; // null
 		};
 
 		/** sync cursor between multiple charts */

diff --git a/src/opts.js b/src/opts.js
@@ -306,6 +306,7 @@ export const cursorOpts = {
 		setScale: true,
 		x: true,
 		y: false,
+		uni: null
 	},
 
 	focus: {

diff --git a/src/uPlot.js b/src/uPlot.js
@@ -1611,18 +1611,51 @@ export default function uPlot(opts, data, then) {
 		// nit: cursor.drag.setSelect is assumed always true
 		if (mouseLeft1 >= 0 && select.show && dragging) {
 			// setSelect should not be triggered on move events
-			if (drag.x) {
+
+			let dragX = drag.x;
+			let dragY = drag.y;
+			let uni = drag.uni;
+
+			if (uni != null) {
+				let xDistance = abs(mouseLeft0 - mouseLeft1);
+				let yDistance = abs(mouseTop0 - mouseTop1);
+
+				if (xDistance < uni)
+					dragX = false;
+				if (yDistance < uni)
+					dragY = false;
+
+				// neither x or y passed the threshold, we are in the magenta box (#219). In this
+				// scenario, we choose a unidirectional zoom based on which point is furthest from
+				// the origin M0
+				if (!dragX && !dragY) {
+					if (xDistance > yDistance)
+						dragX = true;
+					else
+						dragY = true;
+				}
+			}
+
+			if (dragX) {
 				let minX = min(mouseLeft0, mouseLeft1);
 				let maxX = max(mouseLeft0, mouseLeft1);
 				setStylePx(selectDiv, LEFT,  select[LEFT] = minX);
 				setStylePx(selectDiv, WIDTH, select[WIDTH] = maxX - minX);
+				if (uni != null && !dragY) {
+					setStylePx(selectDiv, TOP, select[TOP] = 0);
+					setStylePx(selectDiv, HEIGHT, select[HEIGHT] = plotHgtCss);
+				}
 			}
 
-			if (drag.y) {
+			if (dragY) {
 				let minY = min(mouseTop0, mouseTop1);
 				let maxY = max(mouseTop0, mouseTop1);
 				setStylePx(selectDiv, TOP,    select[TOP] = minY);
 				setStylePx(selectDiv, HEIGHT, select[HEIGHT] = maxY - minY);
+				if (uni != null && !dragX) {
+					setStylePx(selectDiv, LEFT, select[LEFT] = 0);
+					setStylePx(selectDiv, WIDTH, select[WIDTH] = plotWidCss);
+				}
 			}
 		}