feat(sdfsdf): sdfsdf

index.html

@@ -62,6 +62,8 @@ <h3>Preview Masking effects using handwrite.js</h3>
 	</div>
 </div>
 
+<div id="root"></div>
+
 
 </body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

package.json

@@ -58,7 +58,9 @@
     "testEnvironment": "jsdom"
   },
   "dependencies": {
-    "signals": "1.0.0"
+    "signals": "1.0.0",
+    "react": "15.4.2",
+    "react-dom": "15.4.2"
   },
   "author": "Gar Liu <[email protected]> (http://lonelydatum.com/)",
   "license": "MIT",

src/App.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import styles from './index.css'
+
+
+export class App extends Component {
+	render() {
+		return (
+			<div className={styles.main}>
+
+			</div>
+		);
+	}
+}
+
+
+export default App;

src/Handwrite.js

@@ -57,18 +57,12 @@ class Handwrite {
 
 
 	drawArt() {
-
 		this.ctxArt.clearRect(0, 0, this.WIDTH, this.HEIGHT)
 		this.ctxArt.drawImage(this.canvasMask, 0, 0);
-
 		this.ctxArt.save();
-
 		this.ctxArt.globalCompositeOperation = 'source-in';
-
 		this.ctxArt.drawImage(this.image, 0, 0);
-
 		this.ctxArt.restore();
-
 	}
 
 	render() {

src/dev.js

@@ -3,6 +3,7 @@ import Capture from './Capture.js'
 import Handwrite from './Handwrite.js'
 
 
+
 const dragTarget = document.getElementById('dragTarget');
 const captureCanvas = document.getElementById('captureCanvas');
 const captureImage = document.getElementById('captureImage');
@@ -29,6 +30,7 @@ class Dev {
 		this.brush = brushSize.value
 		this.image = null
 
+		console.log(localStorage);
 		if(localStorage.length>0) {
 			this.updateFromLocal()
 			this.ready()
@@ -41,14 +43,17 @@ class Dev {
 		brushSize.addEventListener('change', ()=>this.brushUpdate(brushSize.value))
 		drawButton.addEventListener('click', this.draw.bind(this), false )
 		undo.addEventListener('click', this.undo.bind(this))
-		startOver.addEventListener('click', this.capture.startOver.bind(this.capture) )
+
 	}
 
 	ready() {
+		console.log(this.points);
 		this.capture = new Capture(captureCanvas, brushSize.value, this.points)
 		this.handwrite = new Handwrite(renderCanvas, renderImage)
 
 		this.capture.signals.pointsUpdated.add(this.pointsUpdated)
+		startOver.addEventListener('click', this.capture.startOver.bind(this.capture) )
+
 		this.loadImage(this.image)
 		this.pointsUpdated(this.points);
 		this.brushUpdate(this.brush)
@@ -102,24 +107,5 @@ class Dev {
 
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 export default new Dev()

src/index.css

@@ -0,0 +1,3 @@
+.main {
+
+}