add a ready() callback to constructor for signaling DOM insertion (#63)

this delays firing hooks/plugins in case they need to measure the dom
leeoniya · Dec 28, 2019 · 7f3c51e · 7f3c51e
1 parent bfa69b5
commit 7f3c51e
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 70 deletions.
diff --git a/demos/cursor-tooltip.html b/demos/cursor-tooltip.html
@@ -27,82 +27,47 @@
 		<script src="../dist/uPlot.iife.js"></script>
 		<script src="https://tobyzerner.github.io/placement.js/dist/index.js"></script>
 		<script>
-			function awaitSelector(selector) {
-				return new Promise((resolve, reject) => {
-					function chk() {
-						let el = document.querySelector(selector);
-
-						if (el) {
-							resolve(el);
-							return true;
-						}
-					};
-
-					if (!chk()) {
-						new MutationObserver((recs, o) => {
-							chk() && o.disconnect();
-						}).observe(document.documentElement, {
-							childList: true,
-							subtree: true
-						});
-					}
-				});
-			}
-
 			function tooltipPlugin(opts) {
 				let bound, bLeft, bTop;
-				let inDom = false;
 
 				const overlay = document.createElement("div");
 				overlay.id = "overlay";
 				overlay.style.display = "none";
 				overlay.style.position = "absolute";
 				document.body.appendChild(overlay);
 
-				function setTooltip(u) {
-					const { left, top, idx } = u.cursor;
-					const x = u.data[0][idx];
-					const y = u.data[1][idx];
-					const anchor = { left: left + bLeft, top: top + bTop };
-					overlay.textContent = `${x},${y} at ${left},${top}`;
-					placement(overlay, anchor, "right", "start", { bound });
-				}
-
 				return {
 					init: [
-						u => {
-							awaitSelector("#chart").then(el => {
-								inDom = true;
-								let can = u.ctx.canvas;
+						(u, opts) => {
+							let can = u.ctx.canvas;
 
-								bound = can;
-							//	bound = document.body;
+							bound = can;
+						//	bound = document.body;
 
-								can.onmouseenter = () => {
-									overlay.style.display = "block";
-								};
+							can.onmouseenter = () => {
+								overlay.style.display = "block";
+							};
 
-								can.onmouseleave = () => {
-									overlay.style.display = "none";
-								};
+							can.onmouseleave = () => {
+								overlay.style.display = "none";
+							};
 
-								let bbox = can.getBoundingClientRect();
-								bLeft = bbox.left;
-								bTop = bbox.top;
-							});
+							let bbox = can.getBoundingClientRect();
+							bLeft = bbox.left;
+							bTop = bbox.top;
+
+							if (opts.cursor.left > 0)
+								overlay.style.display = "block";
 						}
 					],
 					setCursor: [
 						u => {
-							if (inDom)
-								setTooltip(u);
-							else {
-								// initial position is set
-								requestAnimationFrame(() => {
-									overlay.style.display = "block";
-									setTooltip(u);
-								});
-							}
+							const { left, top, idx } = u.cursor;
+							const x = u.data[0][idx];
+							const y = u.data[1][idx];
+							const anchor = { left: left + bLeft, top: top + bTop };
+							overlay.textContent = `${x},${y} at ${left},${top}`;
+							placement(overlay, anchor, "right", "start", { bound });
 						}
 					],
 				};
@@ -140,9 +105,10 @@
 				[40, 43, 60, 65, 71, 73, 80]
 			];
 
-			let u = new uPlot.Line(opts, data);
-
-			document.body.appendChild(u.root);
+			let u = new uPlot.Line(opts, data, (u, ready) => {
+				document.body.appendChild(u.root);
+				ready();
+			});
 		</script>
 	</body>
 </html>
diff --git a/dist/uPlot.cjs.js b/dist/uPlot.cjs.js
@@ -799,11 +799,17 @@ function filtMouse(e) {
 	return e.button == 0;
 }
 
-function Line(opts, data) {
+function call2(u, r) {
+	r();
+}
+
+function Line(opts, data, ready) {
 	opts = copy(opts);
 
 	var self = this;
 
+	ready = ready || call2;
+
 	var series  = setDefaults(opts.series, xSeriesOpts, ySeriesOpts);
 	var axes    = setDefaults(opts.axes || [], xAxisOpts, yAxisOpts);
 	var scales  = (opts.scales = opts.scales || {});
@@ -2008,9 +2014,11 @@ function Line(opts, data) {
 
 	self.destroy = destroy;
 
-	fire("init", opts, data);
+	ready(self, function () {
+		fire("init", opts, data);
 
-	setData(data || opts.data);
+		setData(data || opts.data);
+	});
 }
 
 exports.Line = Line;

diff --git a/dist/uPlot.iife.js b/dist/uPlot.iife.js
@@ -800,11 +800,17 @@ var uPlot = (function (exports) {
 		return e.button == 0;
 	}
 
-	function Line(opts, data) {
+	function call2(u, r) {
+		r();
+	}
+
+	function Line(opts, data, ready) {
 		opts = copy(opts);
 
 		var self = this;
 
+		ready = ready || call2;
+
 		var series  = setDefaults(opts.series, xSeriesOpts, ySeriesOpts);
 		var axes    = setDefaults(opts.axes || [], xAxisOpts, yAxisOpts);
 		var scales  = (opts.scales = opts.scales || {});
@@ -2009,9 +2015,11 @@ var uPlot = (function (exports) {
 
 		self.destroy = destroy;
 
-		fire("init", opts, data);
+		ready(self, function () {
+			fire("init", opts, data);
 
-		setData(data || opts.data);
+			setData(data || opts.data);
+		});
 	}
 
 	exports.Line = Line;