moving Tessellate towards more of a library structure

src/tessellate.js

@@ -1,20 +1,24 @@
 
-import {random} from './utils.js';
+import {noop, random} from './utils.js';
 
 import OnTap from './onTap.js';
 import Point from './point.js';
 import Sketch from './sketch.js';
 
-import TileCircle from './tileCircle.js';
-import TileHex    from './tileHex.js';
-import TileSquare from './tileSquare.js';
+import TileCircle  from './tileCircle.js';
+import TileSquare  from './tileSquare.js';
+import TileHexagon from './tileHexagon.js';
+export {TileCircle, TileHexagon, TileSquare};
 
 import Cell from './cell.js';
+export {Cell};
 
 export default class Tessellate {
 	constructor(settings) {
-		['draw'].map(method => {this[method] = this[method].bind(this)});
+		['click', 'draw'].map(method => {this[method] = this[method].bind(this)});
 
+		this.drawCB = settings.draw || noop;
+		this.clickCB = settings.click || noop;
 		this.element = document.querySelector(settings.element);
 
 		this.sketch = new Sketch({
@@ -22,45 +26,23 @@ export default class Tessellate {
 			draw: this.draw
 		});
 
-		this.map = [];
-
 		this.onTap = new OnTap({
 			element: this.element,
-			click: (event) => {
-				let x = event.pageX;
-				let y = event.pageY;
-				let tiles = ['circle', 'hex', 'square'];
-				let styles = ['filled', 'outline'];
-				let scale = random(10, 50);
-
-				this.map.push(new Cell({
-					tile: tiles[random(tiles.length-1)],
-					style: styles[random(styles.length-1)],
-					name: 'gavin',
-					x,
-					y,
-					scale,
-					pointyTop: random(1) ? true : false,
-					red: random(255),
-					green: random(255),
-					blue: random(255),
-					alpha: 0.5
-				}));
-			}
+			click: this.click
 		});
-
-		this.circle  = new TileCircle({context: this.sketch.getContext()});
-		this.hex     = new TileHex({context: this.sketch.getContext()});
-		this.square  = new TileSquare({context: this.sketch.getContext()});
 	}
 
-	draw(context, now, lastTime) {
+	click(event) {
+		this.clickCB(event);
+	}
+
+	draw(context) {
 		let canvas = context.canvas;
 		let width = canvas.width;
 		let height = canvas.height;
 
 		context.clearRect(0, 0, width, height);
 
-		this.map.forEach(cell => this[cell.tile][cell.style](cell));
+		this.drawCB(context);
 	}
 }