Merge pull request #10 from lawwrr/extend-onDraw-api

Fix readme, save test screenshots

.gitignore

@@ -1,10 +1,7 @@
 node_modules/*
 
 dist/*
-!dist/.gitexists
-
-test/screenshots/*
-!test/screenshots/.gitexists
+temp/*
 
 .DS_store
 *.log

README.md

@@ -8,6 +8,8 @@ Draws cute animated canvas constellations.
 </p>
 
 
+
+
 ## Usage (webpack+babel)
 Grab the code from here or npm
 
@@ -37,10 +39,14 @@ Then just import it and feed it some parameters. There's a full list below.
     });
 
 
+
+
 ## Usage (browser)
 Grab the [latest release](https://github.com/lawwrr/constellation/releases) and drop it in as a script tag. `window.constellation` will appear
 
 
+
+
 ## Parameters
 All of them are optional but you might want to change some
 
@@ -64,31 +70,34 @@ All of them are optional but you might want to change some
 | **style.lineSize** | `number` | Size (line weight) of the lines |
 
 
+
+
 ## Drawing things yourself
 For further customization you can also pass an `onDraw` parameter with a number of callbacks. These will allow you to take over the drawing process of the canvas.
 
     let constellation = Constellation({
         size:[500,800],
         canvas: document.querySelector('canvas'),
         onDraw: {
-            afterStar: (ctx,node,style) => {
-                ctx.beginPath();
-                ctx.arc(
-                    node.pos[0], node.pos[1], style.starSize,0, 2 * Math.PI
-                );
-                ctx.globalCompositeOperation = 'destination-over';
+            afterStar: (ctx,style,star) => {
                 ctx.fillStyle = 'rgba(0,0,0,0)';
-                ctx.shadowColor = '#999';
-                ctx.shadowBlur = 20;
-                ctx.shadowOffsetX = 0;
-                ctx.shadowOffsetY = 15;
+                ctx.beginPath();
+                    ctx.arc(
+                        node.pos[0], node.pos[1], style.starSize,0, 2 * Math.PI
+                    );
+                    ctx.globalCompositeOperation = 'destination-over';
+                    ctx.shadowColor = '#999';
+                    ctx.shadowBlur = 20;
+                    ctx.shadowOffsetX = 0;
+                    ctx.shadowOffsetY = 15;
+                    ctx.fill();
                 ctx.closePath();
-                ctx.fill();
+                ctx.fillStyle = style.starColor;
             }
         }
     });
 
-You can see how these plug together at `src/class/Canvas.js` but here's a quick chart
+You can see how these plug in at `src/class/Canvas.js` for yourself to better understand what's happening but here's a quick reference.
 
 | Callback | Description |
 | --- | --- |
@@ -98,21 +107,18 @@ You can see how these plug together at `src/class/Canvas.js` but here's a quick
 | **afterLine**(ctx,style,line) | takes place after the default line drawing. `line` contains the coordinates for the line that was drawn |
 | **afterFrame**(ctx,style,objects) | takes place after drawing a full frame. `objects` contains all coordinates for stars & lines |
 
+For `afterStar` & `afterLine` you have to reset all fillStyles and whatnot or otherwise they'll carry over into the built-in drawing code. Good news is that for performance reasons you'll probably want to avoid `afterStar` & `afterLine` anyway and instead provide a full drawing solution or plug into `afterFrame`.
 
-### Advanced
-
-Available callbacks are `star`,`afterStar`,`line`,`afterLine`,`afterFrame`.
-
-`star` & `line` will completely override the default drawing stage while `afterStar`,`afterLine` & `afterFrame` take place after their drawing is complete
 
-There are some extra advanced properties too! `fuzziness` for controlling how reactive to the mouse stars are and `scale`, for drawing the canvas at a different resolution (it's @2x by default). Check out the code (i mean it's like 2? files total) to see how they work.
+## Advanced
+There are some extra advanced properties too! `fuzziness` for controlling how reactive to the mouse stars are and `scale`, for drawing the canvas at a different resolution (it's @2x by default). Check out the code (i mean it's like 5? files total) to see how they work.
 
 ALSO!! should you ever need it, `Constellation` will return a promise containing `$constellation`, the canvas DOM object after everything there has been done.
 
     let constellation = Constellation({
         /*blah*/
     });
 
-    constellationInstance.then(function(data){
+    constellation.then(function(data){
         console.log(data.$constellation);
     })

gulpfile.js

@@ -1,10 +1,13 @@
-var gulp = require('gulp');
-var webpack = require('webpack-stream');
-var uglify = require('gulp-uglify');
-var path = require('path');
-var mochaPhantomJS = require('gulp-mocha-phantomjs');
-var WrapperPlugin = require('wrapper-webpack-plugin');
-var release = require('gulp-github-release');
+const gulp = require('gulp');
+const gutil = require('gulp-util');
+const webpack = require('webpack-stream');
+const uglify = require('gulp-uglify');
+const path = require('path');
+const fs = require('fs-extra');
+const mochaPhantomJS = require('gulp-mocha-phantomjs');
+const WrapperPlugin = require('wrapper-webpack-plugin');
+const release = require('gulp-github-release');
+const through = require('through2');
 
 var webpackModule = {
 	loaders: [
@@ -25,10 +28,18 @@ var webpackModule = {
 	]
 };
 
-gulp.task('test', function () {
+gulp.task('clean', () => {
+	['dist','temp','temp/screenshots'].map((dir)=>{
+		fs.removeSync(dir);
+		fs.mkdirSync(dir);
+	})
+});
+
+gulp.task('test', ['make'], function () {
 	return gulp
 	.src('test/index.html')
 	.pipe(mochaPhantomJS({
+		reporter: 'nyan',
 		suppressStderr: false,
 		phantomjs: {
 			viewportSize: {
@@ -40,7 +51,37 @@ gulp.task('test', function () {
 				localToRemoteUrlAccessEnabled: true
 			}
 		}
-	}));
+	}))
+	.pipe(through.obj((chunk, enc, cb) => {
+
+		const screenshotPath = 'temp/screenshots/';
+		const screenshots = fs.readdirSync(screenshotPath);
+
+		let uploadCount = 0;
+		const isDoneMaybe = () => {
+			uploadCount++;
+			if(uploadCount >= screenshots.length) {
+				cb(null, chunk);
+			}
+		}
+
+		screenshots.map((screenshot)=>{
+
+			let spawn = require('child_process').spawn;
+			let child = spawn('curl',[
+				'--upload-file',
+				`./${screenshotPath+screenshot}`,
+				'https://transfer.sh/'
+			]);
+
+			child.stdout.on('data', (buffer) => {
+				gutil.log('Look at it!!!', gutil.colors.magenta(buffer.toString().replace("\n",'')));
+			});
+			child.stdout.on('end', isDoneMaybe);
+
+		});
+
+	}))
 });
 
 gulp.task('default', function() {
@@ -69,7 +110,7 @@ gulp.task('default', function() {
 		.pipe(gulp.dest('dist/'));
 });
 
-gulp.task('make', function() {
+gulp.task('make', ['clean'], function() {
 	return gulp.src('src/app.js')
 		.pipe(webpack({
 			output: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "constelation-canvas",
   "description": "draws cute animated canvas constellations",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "Laura mayhem",
   "bugs": {
     "url": "https://github.com/lawwrr/constellation/issues",
@@ -15,9 +15,11 @@
     "document-ready-promise": "^3.0.1",
     "es6-promise": "^4.0.5",
     "es6-promise-promise": "1.0.0",
+    "fs-extra": "^2.0.0",
     "gulp": "^3.9.1",
     "gulp-mocha-phantomjs": "^0.12.0",
     "gulp-uglify": "^1.5.4",
+    "gulp-util": "^3.0.8",
     "raw-loader": "^0.5.1",
     "webpack": "^1.13.1",
     "webpack-stream": "^3.2.0",
@@ -27,7 +29,8 @@
   "devDependencies": {
     "gulp-github-release": "^1.2.0",
     "mocha": "^2.5.3",
-    "mocha-phantomjs": "^4.1.0"
+    "mocha-phantomjs": "^4.1.0",
+    "through2": "^2.0.3"
   },
   "homepage": "https://lawwrr.github.io/constellation/",
   "keywords": [

test/test.js

@@ -44,8 +44,7 @@ describe('Rendering', function() {
 	after(function(){
 		if (window.callPhantom) {
 			var date = new Date()
-			var filename = "test/screenshots/" + date.getTime()
-			console.log("Taking screenshot " + filename)
+			var filename = "temp/screenshots/" + date.getTime()
 			callPhantom({'screenshot': filename})
 		}
 	})