expose internal pubsub creator as uPlot.sync(key). close #354, #430.

leeoniya · Feb 13, 2021 · b7a33e2 · b7a33e2
1 parent 117dcb2
commit b7a33e2
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 79 deletions.
diff --git a/demos/sync-cursor.html b/demos/sync-cursor.html
@@ -17,6 +17,10 @@
 		<script src="../dist/uPlot.iife.js"></script>
 		<h2 id="wait">Loading lib....</h2>
 
+		<button id="sync">Disable Sync</button>
+
+		<br>
+
 		<script>
 			function round2(val) {
 				return Math.round(val * 100) / 100;
@@ -79,13 +83,15 @@ <h2 id="wait">Loading lib....</h2>
 			function makeChart(data) {
 				console.time('chart');
 
+				let mooSync = uPlot.sync("moo");
+
 				const cursorOpts = {
 					lock: true,
 					focus: {
 						prox: 16,
 					},
 					sync: {
-						key: "moo",
+						key: mooSync.key,
 						setSeries: true,
 					},
 				};
@@ -194,6 +200,28 @@ <h2 id="wait">Loading lib....</h2>
 
 				wait.textContent = "Done!";
 				console.timeEnd('chart');
+
+				let synced = true;
+				let syncBtn = document.getElementById('sync');
+
+				let fooSync = uPlot.sync("foo");
+
+				syncBtn.onclick = () => {
+					synced = !synced;
+
+					if (synced) {
+						mooSync.sub(uplot1);
+						mooSync.sub(uplot2);
+						mooSync.sub(uplot3);
+						syncBtn.textContent = 'Disable Sync';
+					}
+					else {
+						mooSync.unsub(uplot1);
+						mooSync.unsub(uplot2);
+						mooSync.unsub(uplot3);
+						syncBtn.textContent = 'Enable Sync';
+					}
+				}
 /*
 				setTimeout(() => {
 					uplot1.destroy();

diff --git a/dist/uPlot.cjs.js b/dist/uPlot.cjs.js
@@ -1305,24 +1305,31 @@ const yScaleOpts = assign({}, xScaleOpts, {
 
 const syncs = {};
 
-function _sync(opts) {
-	let clients = [];
-
-	return {
-		sub(client) {
-			clients.push(client);
-		},
-		unsub(client) {
-			clients = clients.filter(c => c != client);
-		},
-		pub(type, self, x, y, w, h, i) {
-			if (clients.length > 1) {
-				clients.forEach(client => {
-					client != self && client.pub(type, self, x, y, w, h, i);
-				});
+function _sync(key, opts) {
+	let s = syncs[key];
+
+	if (!s) {
+		let clients = [];
+
+		s = {
+			key,
+			sub(client) {
+				clients.push(client);
+			},
+			unsub(client) {
+				clients = clients.filter(c => c != client);
+			},
+			pub(type, self, x, y, w, h, i) {
+				for (let i = 0; i < clients.length; i++)
+					clients[i] != self && clients[i].pub(type, self, x, y, w, h, i);
 			}
-		}
-	};
+		};
+
+		if (key != null)
+			syncs[key] = s;
+	}
+
+	return s;
 }
 
 function orient(u, seriesIdx, cb) {
@@ -4319,7 +4326,7 @@ function uPlot(opts, data, then) {
 
 	const syncKey = syncOpts.key;
 
-	const sync = (syncKey != null ? (syncs[syncKey] = syncs[syncKey] || _sync()) : _sync());
+	const sync = _sync(syncKey);
 
 	sync.sub(self);
 
@@ -4383,6 +4390,10 @@ uPlot.orient   = orient;
 	uPlot.tzDate  = tzDate;
 }
 
+{
+	uPlot.sync = _sync;
+}
+
 {
 	uPlot.addGap = addGap;
 	uPlot.clipGaps = clipGaps;

diff --git a/dist/uPlot.d.ts b/dist/uPlot.d.ts
@@ -130,6 +130,9 @@ declare class uPlot {
 
 	/** helper function for grabbing proper drawing orientation vars and fns for a plot instance (all dims in canvas pixels) */
 	static orient: (u: uPlot, seriesIdx: number, callback: uPlot.OrientCallback) => any;
+
+	/** returns a pub/sub instance shared by all plots usng the provided key */
+	static sync: (key: string) => uPlot.SyncPubSub;
 }
 
 export = uPlot;
@@ -346,6 +349,13 @@ declare namespace uPlot {
 		over?: boolean; // true
 	}
 
+	export interface SyncPubSub {
+		key:   string;
+		sub:   (client: uPlot) => void;
+		unsub: (client: uPlot) => void;
+		pub:   (type: string, client: uPlot, x: number, y: number, w: number, h: number, i: number) => void;
+	}
+
 	export namespace Cursor {
 		export type LeftTop              = [left: number, top: number];
 

diff --git a/dist/uPlot.esm.js b/dist/uPlot.esm.js
@@ -1303,24 +1303,31 @@ const yScaleOpts = assign({}, xScaleOpts, {
 
 const syncs = {};
 
-function _sync(opts) {
-	let clients = [];
-
-	return {
-		sub(client) {
-			clients.push(client);
-		},
-		unsub(client) {
-			clients = clients.filter(c => c != client);
-		},
-		pub(type, self, x, y, w, h, i) {
-			if (clients.length > 1) {
-				clients.forEach(client => {
-					client != self && client.pub(type, self, x, y, w, h, i);
-				});
+function _sync(key, opts) {
+	let s = syncs[key];
+
+	if (!s) {
+		let clients = [];
+
+		s = {
+			key,
+			sub(client) {
+				clients.push(client);
+			},
+			unsub(client) {
+				clients = clients.filter(c => c != client);
+			},
+			pub(type, self, x, y, w, h, i) {
+				for (let i = 0; i < clients.length; i++)
+					clients[i] != self && clients[i].pub(type, self, x, y, w, h, i);
 			}
-		}
-	};
+		};
+
+		if (key != null)
+			syncs[key] = s;
+	}
+
+	return s;
 }
 
 function orient(u, seriesIdx, cb) {
@@ -4317,7 +4324,7 @@ function uPlot(opts, data, then) {
 
 	const syncKey = syncOpts.key;
 
-	const sync = (syncKey != null ? (syncs[syncKey] = syncs[syncKey] || _sync()) : _sync());
+	const sync = _sync(syncKey);
 
 	sync.sub(self);
 
@@ -4381,6 +4388,10 @@ uPlot.orient   = orient;
 	uPlot.tzDate  = tzDate;
 }
 
+{
+	uPlot.sync = _sync;
+}
+
 {
 	uPlot.addGap = addGap;
 	uPlot.clipGaps = clipGaps;

diff --git a/dist/uPlot.iife.js b/dist/uPlot.iife.js
@@ -1306,24 +1306,31 @@ var uPlot = (function () {
 
 	var syncs = {};
 
-	function _sync(opts) {
-		var clients = [];
-
-		return {
-			sub: function sub(client) {
-				clients.push(client);
-			},
-			unsub: function unsub(client) {
-				clients = clients.filter(c => c != client);
-			},
-			pub: function pub(type, self, x, y, w, h, i) {
-				if (clients.length > 1) {
-					clients.forEach(client => {
-						client != self && client.pub(type, self, x, y, w, h, i);
-					});
+	function _sync(key, opts) {
+		var s = syncs[key];
+
+		if (!s) {
+			var clients = [];
+
+			s = {
+				key: key,
+				sub: function sub(client) {
+					clients.push(client);
+				},
+				unsub: function unsub(client) {
+					clients = clients.filter(c => c != client);
+				},
+				pub: function pub(type, self, x, y, w, h, i) {
+					for (var i$1 = 0; i$1 < clients.length; i$1++)
+						{ clients[i$1] != self && clients[i$1].pub(type, self, x, y, w, h, i$1); }
 				}
-			}
-		};
+			};
+
+			if (key != null)
+				{ syncs[key] = s; }
+		}
+
+		return s;
 	}
 
 	function orient(u, seriesIdx, cb) {
@@ -4345,7 +4352,7 @@ var uPlot = (function () {
 
 		var syncKey = syncOpts.key;
 
-		var sync = (syncKey != null ? (syncs[syncKey] = syncs[syncKey] || _sync()) : _sync());
+		var sync = _sync(syncKey);
 
 		sync.sub(self);
 
@@ -4409,6 +4416,10 @@ var uPlot = (function () {
 		uPlot.tzDate  = tzDate;
 	}
 
+	{
+		uPlot.sync = _sync;
+	}
+
 	{
 		uPlot.addGap = addGap;
 		uPlot.clipGaps = clipGaps;

diff --git a/dist/uPlot.iife.min.js b/dist/uPlot.iife.min.js
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
   "homepage": "https://github.com/leeoniya/uPlot#readme",
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.3",
-    "rollup": "^2.38.5",
+    "rollup": "^2.39.0",
     "rollup-plugin-terser": "^7.0.2"
   }
 }
diff --git a/src/sync.js b/src/sync.js
@@ -1,21 +1,28 @@
 export const syncs = {};
 
-export function _sync(opts) {
-	let clients = [];
+export function _sync(key, opts) {
+	let s = syncs[key];
 
-	return {
-		sub(client) {
-			clients.push(client);
-		},
-		unsub(client) {
-			clients = clients.filter(c => c != client);
-		},
-		pub(type, self, x, y, w, h, i) {
-			if (clients.length > 1) {
-				clients.forEach(client => {
-					client != self && client.pub(type, self, x, y, w, h, i);
-				});
+	if (!s) {
+		let clients = [];
+
+		s = {
+			key,
+			sub(client) {
+				clients.push(client);
+			},
+			unsub(client) {
+				clients = clients.filter(c => c != client);
+			},
+			pub(type, self, x, y, w, h, i) {
+				for (let i = 0; i < clients.length; i++)
+					clients[i] != self && clients[i].pub(type, self, x, y, w, h, i);
 			}
-		}
-	};
+		};
+
+		if (key != null)
+			syncs[key] = s;
+	}
+
+	return s;
 }
diff --git a/src/uPlot.js b/src/uPlot.js
@@ -165,10 +165,7 @@ import {
 	legendFill,
 } from './opts';
 
-import {
-	_sync,
-	syncs,
-} from './sync';
+import { _sync } from './sync';
 
 import { linear  } from './paths/linear';
 import { spline  } from './paths/spline';
@@ -2521,7 +2518,7 @@ export default function uPlot(opts, data, then) {
 
 	const syncKey = FEAT_CURSOR && syncOpts.key;
 
-	const sync = FEAT_CURSOR && (syncKey != null ? (syncs[syncKey] = syncs[syncKey] || _sync()) : _sync());
+	const sync = FEAT_CURSOR && _sync(syncKey);
 
 	FEAT_CURSOR && sync.sub(self);
 
@@ -2585,6 +2582,10 @@ if (FEAT_TIME) {
 	uPlot.tzDate  = tzDate;
 }
 
+if (FEAT_CURSOR) {
+	uPlot.sync = _sync;
+}
+
 if (FEAT_PATHS) {
 	uPlot.addGap = addGap;
 	uPlot.clipGaps = clipGaps;
@@ -2595,4 +2596,4 @@ if (FEAT_PATHS) {
 	FEAT_PATHS_SPLINE  && (paths.spline  = spline);
 	FEAT_PATHS_STEPPED && (paths.stepped = stepped);
 	FEAT_PATHS_BARS    && (paths.bars    = bars);
-}
+}