add .moveCursor(x,y) API. (#67)

leeoniya · Dec 8, 2019 · 0c6a639 · 0c6a639
1 parent 3ad258e
commit 0c6a639
Show file tree

Hide file tree

Showing 5 changed files with 215 additions and 101 deletions.
diff --git a/demos/tooltips.html b/demos/tooltips.html
@@ -23,6 +23,8 @@
 					width: 600,
 					height: 400,
 					init(u, opts, data) {
+					//	u.moveCursor(100, 100);				// initial cursor position
+
 						let plot = u.root.querySelector(".plot");
 
 						let ttc = u.cursortt = document.createElement("div");
@@ -43,10 +45,35 @@
 							plot.appendChild(tt);
 							return tt;
 						});
+
+						function hideTips() {
+							ttc.style.display = "none";
+							u.seriestt.forEach(tt => {
+								tt.style.display = "none";
+							});
+						}
+
+						function showTips() {
+							ttc.style.display = null;
+							u.seriestt.forEach(tt => {
+								tt.style.display = null;
+							});
+						}
+
+						plot.addEventListener("mouseleave", () => {
+							u.moveCursor(-10, -10);
+							hideTips();
+						});
+
+						plot.addEventListener("mouseenter", () => {
+							showTips();
+						});
+
+						hideTips();
 					},
 					events: {
 						cursormove: [
-							function(u, left, top, idx) {
+							(u, left, top, idx) => {
 								u.cursortt.style.left = left + "px";
 								u.cursortt.style.top = top + "px";
 								u.cursortt.textContent = "(" + u.valAt(left, "x").toFixed(2) + ", " + u.valAt(top, "y").toFixed(2) + ")";

diff --git a/dist/uPlot.cjs.js b/dist/uPlot.cjs.js
@@ -1403,16 +1403,16 @@ function Line(opts, data) {
 	var vt;
 	var hz;
 
-	var x = null;
-	var y = null;
+	var x = -10;
+	var y = -10;
 
 	if (cursor.show && cursor.cross) {
 		var c = "cursor-";
 
 		vt = placeDiv(c + "x", plot);
 		hz = placeDiv(c + "y", plot);
-		x = canCssWidth/2;
-		y = canCssHeight/2;
+	//	x = canCssWidth/2;
+	//	y = canCssHeight/2;
 	}
 
 	var zoom = cursor.show ? placeDiv("zoom", plot) : null;
@@ -1617,6 +1617,12 @@ function Line(opts, data) {
 
 	self.batch = batch;
 
+	self.moveCursor = function (_x, _y) {
+		x = _x;
+		y = _y;
+		updatePointer(true);
+	};
+
 	function updatePointer(pub) {
 		if (inBatch) {
 			shouldUpdatePointer = true;
@@ -1632,51 +1638,74 @@ function Line(opts, data) {
 			trans(hz,0,y);
 		}
 
-	//	let pctY = 1 - (y / rect[HEIGHT]);
+		var idx;
 
-		var idx = closestIdxFromXpos(x);
+		// if cursor hidden, hide points & clear legend vals
+		if (x < 0) {
+			idx = null;
 
-		var scX = scales[xScaleKey];
+			for (var i = 0; i < series.length; i++) {
+				if (i > 0) {
+					distsToCursor[i] = inf;
+					trans(cursorPts[i], -10, -10);
+				}
 
-		var xPos = getXPos(data[0][idx], scX, canCssWidth);
+				if (legendOpts.show) {
+					if (i == 0 && multiValLegend)
+						{ continue; }
 
-		for (var i = 0; i < series.length; i++) {
-			var s = series[i];
+					for (var j = 0; j < legendLabels[i].length; j++)
+						{ legendLabels[i][j][firstChild].nodeValue = '--'; }
+				}
+			}
+		}
+		else {
+		//	let pctY = 1 - (y / rect[HEIGHT]);
 
-			if (i > 0 && s.show) {
-				var yPos = getYPos(data[i][idx], scales[s.scale], canCssHeight);
+			idx = closestIdxFromXpos(x);
 
-				if (yPos == null)
-					{ yPos = -10; }
+			var scX = scales[xScaleKey];
 
-				distsToCursor[i] = yPos > 0 ? abs(yPos - y) : inf;
+			var xPos = getXPos(data[0][idx], scX, canCssWidth);
 
-				cursor.show && trans(cursorPts[i], xPos, yPos);
-			}
-			else
-				{ distsToCursor[i] = inf; }
+			for (var i$1 = 0; i$1 < series.length; i$1++) {
+				var s = series[i$1];
 
-			if (legendOpts.show) {
-				if (i == 0 && multiValLegend)
-					{ continue; }
+				if (i$1 > 0 && s.show) {
+					var yPos = getYPos(data[i$1][idx], scales[s.scale], canCssHeight);
 
-				var src = i == 0 && xScaleType == 2 ? data0 : data[i];
+					if (yPos == null)
+						{ yPos = -10; }
 
-				var vals = multiValLegend ? s.values(idx) : {_: s.value(src[idx])};
+					distsToCursor[i$1] = yPos > 0 ? abs(yPos - y) : inf;
 
-				var j = 0;
+					cursor.show && trans(cursorPts[i$1], xPos, yPos);
+				}
+				else
+					{ distsToCursor[i$1] = inf; }
+
+				if (legendOpts.show) {
+					if (i$1 == 0 && multiValLegend)
+						{ continue; }
+
+					var src = i$1 == 0 && xScaleType == 2 ? data0 : data[i$1];
+
+					var vals = multiValLegend ? s.values(idx) : {_: s.value(src[idx])};
+
+					var j$1 = 0;
 
-				for (var k in vals)
-					{ legendLabels[i][j++][firstChild].nodeValue = vals[k]; }
+					for (var k in vals)
+						{ legendLabels[i$1][j$1++][firstChild].nodeValue = vals[k]; }
+				}
 			}
-		}
 
-		if (dragging) {
-			var minX = min(x0, x);
-			var maxX = max(x0, x);
+			if (dragging) {
+				var minX = min(x0, x);
+				var maxX = max(x0, x);
 
-			setStylePx(zoom, LEFT, minX);
-			setStylePx(zoom, WIDTH, maxX - minX);
+				setStylePx(zoom, LEFT, minX);
+				setStylePx(zoom, WIDTH, maxX - minX);
+			}
 		}
 
 		fire("cursormove", x, y, idx);

diff --git a/dist/uPlot.iife.js b/dist/uPlot.iife.js
@@ -1404,16 +1404,16 @@ var uPlot = (function (exports) {
 		var vt;
 		var hz;
 
-		var x = null;
-		var y = null;
+		var x = -10;
+		var y = -10;
 
 		if (cursor.show && cursor.cross) {
 			var c = "cursor-";
 
 			vt = placeDiv(c + "x", plot);
 			hz = placeDiv(c + "y", plot);
-			x = canCssWidth/2;
-			y = canCssHeight/2;
+		//	x = canCssWidth/2;
+		//	y = canCssHeight/2;
 		}
 
 		var zoom = cursor.show ? placeDiv("zoom", plot) : null;
@@ -1618,6 +1618,12 @@ var uPlot = (function (exports) {
 
 		self.batch = batch;
 
+		self.moveCursor = function (_x, _y) {
+			x = _x;
+			y = _y;
+			updatePointer(true);
+		};
+
 		function updatePointer(pub) {
 			if (inBatch) {
 				shouldUpdatePointer = true;
@@ -1633,51 +1639,74 @@ var uPlot = (function (exports) {
 				trans(hz,0,y);
 			}
 
-		//	let pctY = 1 - (y / rect[HEIGHT]);
+			var idx;
 
-			var idx = closestIdxFromXpos(x);
+			// if cursor hidden, hide points & clear legend vals
+			if (x < 0) {
+				idx = null;
 
-			var scX = scales[xScaleKey];
+				for (var i = 0; i < series.length; i++) {
+					if (i > 0) {
+						distsToCursor[i] = inf;
+						trans(cursorPts[i], -10, -10);
+					}
 
-			var xPos = getXPos(data[0][idx], scX, canCssWidth);
+					if (legendOpts.show) {
+						if (i == 0 && multiValLegend)
+							{ continue; }
 
-			for (var i = 0; i < series.length; i++) {
-				var s = series[i];
+						for (var j = 0; j < legendLabels[i].length; j++)
+							{ legendLabels[i][j][firstChild].nodeValue = '--'; }
+					}
+				}
+			}
+			else {
+			//	let pctY = 1 - (y / rect[HEIGHT]);
 
-				if (i > 0 && s.show) {
-					var yPos = getYPos(data[i][idx], scales[s.scale], canCssHeight);
+				idx = closestIdxFromXpos(x);
 
-					if (yPos == null)
-						{ yPos = -10; }
+				var scX = scales[xScaleKey];
 
-					distsToCursor[i] = yPos > 0 ? abs(yPos - y) : inf;
+				var xPos = getXPos(data[0][idx], scX, canCssWidth);
 
-					cursor.show && trans(cursorPts[i], xPos, yPos);
-				}
-				else
-					{ distsToCursor[i] = inf; }
+				for (var i$1 = 0; i$1 < series.length; i$1++) {
+					var s = series[i$1];
 
-				if (legendOpts.show) {
-					if (i == 0 && multiValLegend)
-						{ continue; }
+					if (i$1 > 0 && s.show) {
+						var yPos = getYPos(data[i$1][idx], scales[s.scale], canCssHeight);
 
-					var src = i == 0 && xScaleType == 2 ? data0 : data[i];
+						if (yPos == null)
+							{ yPos = -10; }
 
-					var vals = multiValLegend ? s.values(idx) : {_: s.value(src[idx])};
+						distsToCursor[i$1] = yPos > 0 ? abs(yPos - y) : inf;
 
-					var j = 0;
+						cursor.show && trans(cursorPts[i$1], xPos, yPos);
+					}
+					else
+						{ distsToCursor[i$1] = inf; }
+
+					if (legendOpts.show) {
+						if (i$1 == 0 && multiValLegend)
+							{ continue; }
+
+						var src = i$1 == 0 && xScaleType == 2 ? data0 : data[i$1];
+
+						var vals = multiValLegend ? s.values(idx) : {_: s.value(src[idx])};
+
+						var j$1 = 0;
 
-					for (var k in vals)
-						{ legendLabels[i][j++][firstChild].nodeValue = vals[k]; }
+						for (var k in vals)
+							{ legendLabels[i$1][j$1++][firstChild].nodeValue = vals[k]; }
+					}
 				}
-			}
 
-			if (dragging) {
-				var minX = min(x0, x);
-				var maxX = max(x0, x);
+				if (dragging) {
+					var minX = min(x0, x);
+					var maxX = max(x0, x);
 
-				setStylePx(zoom, LEFT, minX);
-				setStylePx(zoom, WIDTH, maxX - minX);
+					setStylePx(zoom, LEFT, minX);
+					setStylePx(zoom, WIDTH, maxX - minX);
+				}
 			}
 
 			fire("cursormove", x, y, idx);