Merge pull request #11 from lawwrr/cleanup

cleaner naming
thenextweb · Feb 9, 2017 · 37941ef · 37941ef
2 parents 76764f0 + aeb2602
commit 37941ef
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "constelation-canvas",
   "description": "draws cute animated canvas constellations",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "author": "Laura mayhem",
   "bugs": {
     "url": "https://github.com/lawwrr/constellation/issues",

diff --git a/src/app.js b/src/app.js
@@ -1,15 +1,23 @@
 import Canvas from 'class/Canvas';
+import Puppis from 'worker-loader?inline!./worker/puppis.js';
+
 import text from 'lib/text';
 
-const Puppis = require("worker-loader?inline!./worker/puppis.js");
 
-const styleDefaults = {
-	starSize: 4,
-	starPadding: 5,
-	starColor: '#000',
-	lineColor: 'rgba(0,0,0,.5)',
-	lineSize: 2
-};
+const defaults = {
+	style: {
+		starSize: 4,
+		starPadding: 5,
+		starColor: '#000',
+		lineColor: 'rgba(0,0,0,.5)',
+		lineSize: 2
+	},
+	speed: {
+		active: .125,
+		passive: .075
+	}
+}
+
 
 const constellation = function ({
 	size = [400,400],
@@ -21,25 +29,16 @@ const constellation = function ({
 	padding = [0,0],
 	scale = 2,
 	style = {},
-	speed = {
-		active: .125,
-		passive: .075
-	},
+	speed = {},
 	onDraw = {}
 } = {}) {
 
 
-	/*add to defaults*/
 	if(padding[0] === 0 && padding[1] === 0) padding = [fuzziness,fuzziness]
-	style = Object.assign({}, styleDefaults, style);
-
+	style = Object.assign({}, defaults.style, style);
+	speed = Object.assign({}, defaults.speed, speed);
 
-	/*set up parameters*/
-	let jiggles = true;
-	let lastMouse = [0,0];
 
-
-	/*send all the important bits to worker*/
 	const puppis = new Puppis();
 	text.send(
 		puppis,
@@ -55,74 +54,79 @@ const constellation = function ({
 		}
 	);
 
-	return new Promise((resolve,reject)=>{
 
-		let start = () => {
-
-			if(!canvas) {
-				canvas = document.createElement('canvas');
-				document.body.appendChild(canvas);
-			}
-
-			canvas.setAttribute('width',size[0]*scale);
-			canvas.setAttribute('height',size[1]*scale);
-			canvas.style.width = `${size[0]}px`;
-			canvas.style.height = `${size[1]}px`;
-			canvas.getContext('2d').scale(scale,scale);
-
-			canvas.addEventListener('mousemove',(ev)=>{
-				var x = ev.pageX - canvas.getBoundingClientRect().left + document.documentElement.scrollLeft;
-				var y = ev.pageY - canvas.getBoundingClientRect().top + document.documentElement.scrollTop;
-				jiggles = false;
-				lastMouse = [x,y];
-			});
-			canvas.addEventListener('mouseout',(ev)=>{
-				jiggles = true;
-			});
-
-			const canvasDrawer = new Canvas(canvas,{
-				style: style,
-				onDraw: onDraw
-			});
-
-			const repaint = () => {
-				text.send(
-					puppis,
-					'requestUpdate',
-					{
-						lastMouse: lastMouse,
-						jiggles: jiggles
-					}
-				)
-			}
-
-			puppis.addEventListener('message', (msg)=>{
-				text.is(
-					msg,'updateComplete',
-					(payload) => {
-						requestAnimationFrame(()=>{
-							canvasDrawer.draw({
-								stars: payload.stars,
-								lines: payload.lines
-							});
-							repaint();
-						})
-					}
-				)
-			});
-
-			repaint();
-
-			resolve({
-				$constellation: canvas
-			});
-
-		};
+	const onDOMReady = (resolve,reject) => {
+
+		let isJiggling = true;
+		let pointerPosition = [0,0];
+
+		if(!canvas) {
+			canvas = document.createElement('canvas');
+			document.body.appendChild(canvas);
+		}
+
+		canvas.setAttribute('width',size[0]*scale);
+		canvas.setAttribute('height',size[1]*scale);
+		canvas.style.width = `${size[0]}px`;
+		canvas.style.height = `${size[1]}px`;
+		canvas.getContext('2d').scale(scale,scale);
+
+		canvas.addEventListener('mousemove',(ev)=>{
+			var x = ev.pageX - canvas.getBoundingClientRect().left + document.documentElement.scrollLeft;
+			var y = ev.pageY - canvas.getBoundingClientRect().top + document.documentElement.scrollTop;
+			isJiggling = false;
+			pointerPosition = [x,y];
+		});
+		canvas.addEventListener('mouseout',(ev)=>{
+			isJiggling = true;
+		});
+
+		const canvasDrawer = new Canvas(canvas,{
+			style: style,
+			onDraw: onDraw
+		});
+
+		const repaint = () => {
+			text.send(
+				puppis,
+				'requestUpdate',
+				{
+					pointerPosition: pointerPosition,
+					isJiggling: isJiggling
+				}
+			)
+		}
+
+		puppis.addEventListener('message', (msg)=>{
+			text.is(
+				msg,'updateComplete',
+				(payload) => {
+					requestAnimationFrame(()=>{
+						canvasDrawer.draw({
+							stars: payload.stars,
+							lines: payload.lines
+						});
+						repaint();
+					})
+				}
+			)
+		});
+
+		repaint();
+
+		resolve({
+			$constellation: canvas
+		});
+
+	};
+
+
+	return new Promise((resolve,reject)=>{
 
 		if (/comp|inter|loaded/.test(document.readyState)){
-			start();
+			onDOMReady(resolve,reject);
 		} else {
-			window.document.addEventListener('DOMContentLoaded',start);
+			window.document.addEventListener('DOMContentLoaded',()=>onDOMReady(resolve,reject));
 		}
 
 	});

diff --git a/src/worker/puppis.js b/src/worker/puppis.js
@@ -3,7 +3,7 @@ import text from 'lib/text';
 
 let speed, starCount, lineCount, padding, size, style, fuzziness;
 let nodes, ships;
-let jiggles,lastMouse;
+let isJiggling,pointerPosition;
 
 let chunks = [];
 let connectedNodes = [];
@@ -67,13 +67,13 @@ const makeCoordinateList = (...coords) => {
 
 const repositionNodes = () => {
 
-	let x = lastMouse[0];
-	let y = lastMouse[1];
+	let x = pointerPosition[0];
+	let y = pointerPosition[1];
 	let localSpeed = speed.active;
 
 	nodeRenderList.map((node)=>{
 
-		if(jiggles) {
+		if(isJiggling) {
 			localSpeed = speed.passive;
 			x = node.original[0] + node._jiggle[0],
 			y = node.original[1] + node._jiggle[1]
@@ -222,8 +222,8 @@ self.onmessage = function(ev) {
 			createThings();
 			break;
 		case 'requestUpdate' :
-			jiggles = ev.data.payload.jiggles;
-			lastMouse = ev.data.payload.lastMouse;
+			isJiggling = ev.data.payload.isJiggling;
+			pointerPosition = ev.data.payload.pointerPosition;
 			repositionNodes();
 			text.send(
 				self,

diff --git a/test/test.js b/test/test.js
@@ -6,7 +6,8 @@ describe('Initialization', function() {
 });
 
 describe('Rendering', function() {
-	this.timeout(10000);
+	this.timeout(1000);
+
 	it('should render a constellation', function(done) {
 		var constellationInstance = window.constellation({
 			size:[window.innerWidth,window.innerHeight],