feat(proto): workable version

lonelydatum · Feb 25, 2017 · 2776771 · 2776771
1 parent bbbef7b
commit 2776771
Show file tree

Hide file tree

Showing 14 changed files with 740 additions and 0 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,17 @@
+language: node_js
+cache:
+  directories:
+    - node_modules
+notifications:
+  email: false
+node_js:
+  - '7'
+  - '6'
+  - '4'
+before_script:
+  - npm prune
+after_success:
+  - npm run semantic-release
+branches:
+  except:
+    - /^v\d+\.\d+\.\d+$/
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Handwrite</title>
+	<style>
+
+	</style>
+	<link rel="stylesheet" type="text/css" href="./styles.css">
+</head>
+<body>
+
+
+
+<div id="dragTarget">
+	Drag Image Here
+</div>
+
+
+
+
+<div id="signature">
+
+	<div id="capture" class="column">
+		<h3>Sign Here</h3>
+
+		<div class="holder" id="captureItem">
+			<img id="captureImage">
+			<canvas id="captureCanvas" height="500"></canvas>
+		</div>
+
+		<input type="range" id="brushSize" value="5" min="1" max="10"><span id="brushSizeResult"></span>
+		<button id="undo">Undo (ctr+z)</button>
+		<button id="startOver">Start Over</button>
+		<span id="totalPoint"></span>
+		<textarea rows="60" cols="100" id="pointsTextArea"></textarea>
+
+	</div>
+
+	<div class="column" id="render">
+		<h3>Preview Animation Here</h3>
+
+
+		<div class="holder" id="renderItem">
+			<canvas id="renderCanvas"></canvas>
+			<img id="renderImage">
+		</div>
+		<button id="drawButton">DRAW</button>
+
+	</div>
+</div>
+
+
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
+<script src="static/bundle.js"></script>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,70 @@
+{
+  "name": "handwrite",
+  "version": "0.0.0-development",
+  "description": "creates masking effect that looks like handwriting",
+  "main": "index.js",
+  "scripts": {
+    "start": "node server.js",
+    "commit": "git-cz",
+    "watch:test": "jest --watch",
+    "test": "jest",
+    "prebuild": "rimraf dist",
+    "build": "npm-run-all --parallel build:*",
+    "build:main": "babel src",
+    "build:umd": "webpack --config webpack.config.babel.js --output-filename index.umd.js",
+    "build:umd.min": "webpack --config webpack.config.babel.js --output-filename index.umd.min.js -p",
+    "build:utilities": "webpack --config webpack.config.utilities.babel.js --output-filename utilities.umd.min.js -p",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lonelydatum/handwrite.git"
+  },
+  "keywords": [
+    "handwriting",
+    "mask"
+  ],
+  "devDependencies": {
+    "babel-cli": "6.22.2",
+    "babel-jest": "18.0.0",
+    "babel-loader": "6.2.10",
+    "babel-polyfill": "6.22.0",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-stage-2": "6.22.0",
+    "babel-preset-stage-3": "6.22.0",
+    "chai": "3.5.0",
+    "commitizen": "2.9.5",
+    "cz-conventional-changelog": "1.2.0",
+    "jest-cli": "18.1.0",
+    "mocha": "3.2.0",
+    "npm-run-all": "4.0.1",
+    "rimraf": "2.5.4",
+    "semantic-release": "^6.3.2",
+    "webpack": "2.2.1",
+    "webpack-dev-server": "2.2.1"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "stage-2",
+      "stage-3"
+    ]
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
+  },
+  "dependencies": {
+    "signals": "1.0.0"
+  },
+  "author": "Gar Liu <[email protected]> (http://lonelydatum.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lonelydatum/handwrite/issues"
+  },
+  "homepage": "https://github.com/lonelydatum/handwrite#readme"
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,15 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config.dev');
+
+new WebpackDevServer(webpack(config), {
+	publicPath: config.output.publicPath,
+	hot: true,
+	historyApiFallback: true
+}).listen(1337, 'localhost', function (err, result) {
+	if (err) {
+		console.log(err);
+	}
+
+	console.log('Listening at localhost:1337');
+});
diff --git a/src/Capture.js b/src/Capture.js
@@ -0,0 +1,138 @@
+import {Circle} from './Helper'
+import Signals from 'signals'
+
+
+class Capture {
+	constructor(canvas, radius=20) {
+		this.signals = {
+			pointsUpdated: new Signals()
+		}
+
+		this.radius = radius
+		this.isDown = false
+		this.canvas = canvas
+		this.ctx = this.canvas.getContext('2d')
+
+		this.canvas.addEventListener('mousemove', this.onMove.bind(this), false )
+		this.canvas.addEventListener('mousedown', this.onDown.bind(this), false )
+		this.canvas.addEventListener('mouseup', this.onUp.bind(this), false )
+
+		this.points = []
+
+		this.index = 0
+
+		this.tl = new TimelineMax()
+		this.color = 'rgba(255, 0, 255, .2)'
+		this.prev = {x:-1, y:-1}
+
+		this.storage = []
+		this.currentItem = []
+
+		document.onkeydown = this.onKeyPress.bind(this, this);
+	}
+
+	setBrush(value) {
+		this.radius = value
+	}
+
+
+	// undo from key: ctr+z
+	onKeyPress(scope, e) {
+		var evtobj = window.event? event : e
+		if (evtobj.keyCode == 90 && evtobj.ctrlKey) {
+			scope.undo()
+		}
+	}
+
+
+	undo(){
+		this.storage.splice(-1, 1)
+		this.merge()
+		this.updateDraw()
+	}
+
+
+	// takes all the items from this.storage and merges/flattens them into this.points
+	merge() {
+		this.points = []
+		this.storage.forEach(item=>{
+			this.points = this.points.concat(item)
+		})
+
+		localStorage.setItem('points', JSON.stringify(this.points))
+		this.signals.pointsUpdated.dispatch(this.points)
+	}
+
+
+
+	onDown(e) {
+		e.preventDefault()
+		this.currentItem = []
+		this.isDown = true
+	}
+
+	onUp(e) {
+		this.isDown = false
+		this.storage.push(this.currentItem)
+		this.merge()
+	}
+
+
+
+	onMove(e){
+		if(!this.isDown) { return }
+
+
+		const pos = this.getMousePos(this.canvas, e)
+		if(pos.x!==this.prev.x|| pos.y!==this.prev.y) {
+			this.currentItem.push(pos)
+			this.prev = pos
+			this.drawCircle(pos.x, pos.y)
+		}
+	}
+
+	drawCircle(x, y) {
+		Circle(this.ctx, x, y, this.radius, this.color)
+	}
+
+	updateDraw() {
+		this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height)
+		this.points.forEach(pos => this.drawCircle(pos.x, pos.y) )
+
+	}
+
+	startOver() {
+		this.storage = []
+		this.merge()
+		this.updateDraw()
+	}
+
+	// clear() {
+	// 	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+	// }
+
+	draw() {
+		this.index = 0
+		const si = setInterval(()=>{
+			const point = this.points[this.index]
+			if(point) {
+				// Circle(this.ctx, point.x, point.y, this.radius, '#00FF00')
+			} else {
+				clearInterval(si)
+			}
+			this.index++
+		}, 10)
+	}
+
+
+
+	getMousePos(canvas, evt) {
+        var rect = canvas.getBoundingClientRect()
+        return {
+          x: Math.round(evt.clientX - rect.left),
+          y: Math.round(evt.clientY - rect.top)
+        };
+    }
+}
+
+export default Capture
diff --git a/src/DragFile.js b/src/DragFile.js
@@ -0,0 +1,34 @@
+import Signals from 'signals'
+
+class DragFile {
+	constructor(dom) {
+		this.signals = {
+			imageReady: new Signals()
+		}
+		var holder = dom
+		holder.ondragleave = function () { this.className = ''; return false; };
+		holder.ondragover = function () { this.className = 'hover'; return false; };
+		holder.ondragend = function () { this.className = ''; return false; };
+		holder.ondrop = this.onDrop.bind(holder, this)
+	}
+
+	onDrop(scope, e) {
+		this.className = '';
+		e.preventDefault();
+
+		var file = e.dataTransfer.files[0]
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			scope.signals.imageReady.dispatch(event.target.result)
+		};
+
+
+		reader.readAsDataURL(file);
+		return false;
+
+	}
+
+
+}
+
+export default DragFile
diff --git a/src/Helper.js b/src/Helper.js
@@ -0,0 +1,11 @@
+const PI = Math.PI
+// const color = '#ff0000'
+
+function Circle(ctx, x, y, r=8, color='#ff0000') {
+	ctx.beginPath();
+	ctx.arc(x, y, r, 0, 2 * PI, false);
+	ctx.fillStyle = color;
+	ctx.fill();
+}
+
+export {Circle}