add a drag-to-select feature on the graph page

dist/workers/graph.js

@@ -85,6 +85,8 @@ let paused = false;
 let isOver = '';
 let maxDegree = 0;
 let clusters = {};
+let dragToSelectStartCoord = {};
+let dragToSelectCursorCoord = {};
 
 addEventListener('message', ({ data }) => { 
 	if (this[data.id]) {
@@ -355,6 +357,10 @@ draw = (t) => {
 		};
 	});
 
+	if(dragToSelectStartCoord.x && dragToSelectStartCoord.y && dragToSelectCursorCoord.x && dragToSelectStartCoord.y) {
+		drawDragToSelectBox();
+	}
+
 	ctx.restore();
 };
 
@@ -577,11 +583,61 @@ drawNode = (d) => {
 	};
 };
 
+drawDragToSelectBox = () => {
+	const width = dragToSelectCursorCoord.x - dragToSelectStartCoord.x;
+	const height = dragToSelectCursorCoord.y - dragToSelectStartCoord.y;
+	util.roundedRect(dragToSelectStartCoord.x, dragToSelectStartCoord.y, width, height, 1);
+
+	ctx.strokeStyle = data.colors.selected;
+	ctx.lineWidth = getLineWidth() * 3;
+	ctx.stroke();
+
+	ctx.restore();
+}
+
 onZoom = (data) => {
 	transform = Object.assign(transform, data.transform);
 	redraw();
 };
 
+onDragToSelectStart = (data) => {
+	let {x, y} = data;
+
+	x = transform.invertX(x);
+	y = transform.invertY(y);
+	dragToSelectStartCoord = {x: x, y: y};
+
+	redraw();
+}
+
+onDragToSelectMove = (data) => {
+	let {x, y} = data;
+
+	x = transform.invertX(x);
+	y = transform.invertY(y);
+	dragToSelectCursorCoord = {x: x, y: y};
+
+	const left = Math.min(dragToSelectStartCoord.x, x);
+	const top = Math.min(dragToSelectStartCoord.y, y);
+	const right = Math.max(dragToSelectStartCoord.x, x);
+	const bottom = Math.max(dragToSelectStartCoord.y, y);
+
+	nodes.forEach((d) => {
+		if (d.x >= left && d.x <= right && d.y >= top && d.y <= bottom) {
+			send('onSelect', { node: d.id })
+		};
+	});
+
+	redraw();
+}
+
+onDragToSelectEnd = (data) => {
+	dragToSelectStartCoord = {};
+	dragToSelectCursorCoord = {};
+	send('onTransform', { ...transform });
+	redraw();
+}
+
 onDragStart = ({ active }) => {
 	if (!active) {
 		restart(0.3);