initial upload

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -0,0 +1,6 @@
+Drawpad
+
+Setup for dev:
+* npm install
+* npm run watch
+* electron . 

js/Drawpad.js

@@ -0,0 +1,60 @@
+'use strict';
+
+import Point from "./Point";
+import simplify from "simplify-js";
+import d3 from "d3";
+
+class Drawpad{
+	 constructor() {
+     this.drawing = false;
+     this.path = null;
+     this.pathD = "";
+     this.points = [];
+  }
+  
+  startDrawing(event, parent){
+    this.drawing=true;
+    let newPoint=this.getPoint(event);
+    
+    //add starting point to svg-path
+    this.pathD="M"+newPoint.x+","+newPoint.y;//path Move operation
+    this.path=d3.select("#drawpad").append("path").attr("d", this.pathD);
+    
+    //add new point to array of points, used to reduce the number of points after finishing the line
+    this.points=[];
+    this.points.push(newPoint);
+  }
+  
+  draw(event){
+    if (this.drawing) {
+      let newPoint=this.getPoint(event);
+      
+      this.pathD+=" L"+newPoint.x+","+newPoint.y; //path LineTo operation
+      this.path.attr("d", this.pathD);
+      
+      this.points.push(newPoint);
+    }
+  }
+  
+  stopDrawing(event){
+    this.drawing=false;
+    //reduce the number of points in the polygon (simplify lib) and update the view
+    this.updatePath(simplify(this.points, 1));
+  }
+  
+  getPoint(event){
+    return new Point(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
+  }
+  
+  updatePath(points){
+    this.pathD = "M" + points[0].x + "," + points[0].y;
+    
+    points.forEach(function(point) {
+      this.pathD += " L" + point.x + "," + point.y;
+    }, this);
+    
+    this.path.attr("d", this.pathD);//update d attribute in path 
+  }
+}
+
+export default Drawpad

js/DrawpadView.js

@@ -0,0 +1,36 @@
+require('../less/main.less');
+
+'use strict';
+
+import React from "react";
+import Drawpad from './Drawpad';
+
+let drawpad=new Drawpad();
+
+class DrawpadView extends React.Component{
+
+  constructor(props) {
+    super(props);
+  }
+  
+  startDrawing(event){
+   drawpad.startDrawing(event);
+  }
+  
+  draw(event){
+   drawpad.draw(event);
+  }
+  
+  stopDrawing(event){
+    drawpad.stopDrawing(event);
+  }
+  
+ 
+  render() {
+    return <svg width="700" height="700" id ="drawpad" onMouseDown={this.startDrawing} onMouseMove={this.draw} onMouseUp={this.stopDrawing}></svg>;
+  } 
+  
+}
+
+
+export default DrawpadView

js/Line.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import Point from './Point.js';
+
+class Line{
+	constructor(startPoint, endPoint){
+		this.start=startPoint;
+		this.end=endPoint;
+	}
+	
+	
+}
+
+export default Line;

js/Point.js

@@ -0,0 +1,14 @@
+'use strict';
+
+class Point{
+	constructor(x,y){
+		this.x=x;
+		this.y=y;
+	}
+	
+	toString(){
+		return "point["+ this.x +  "," + this.y +"]";
+	}
+}
+
+export default Point

js/app.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import DrawpadView from './DrawpadView';
+
+React.render(<DrawpadView/>, document.getElementById('app'));

jsconfig.json

@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"target": "ES6",
+		"module": "commonjs",
+		"experimentalDecorators": true
+	}
+}

less/main.less

@@ -0,0 +1,13 @@
+@body-bg: #000;
+@myDiv-fg: #f00;
+
+
+svg{
+  background-color: #808080;
+}
+
+path{
+  stroke:#660000; 
+  fill:none; 
+  stroke-width:5;
+}

main.js

@@ -0,0 +1,22 @@
+var app = require('app');
+var BrowserWindow = require('browser-window');
+
+require('crash-reporter').start();
+
+app.on('window-all-closed', function() {
+  if (process.platform != 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('ready', function() {
+  mainWindow = new BrowserWindow({width: 1360, height: 800});
+
+  mainWindow.loadUrl('file://' + __dirname + '/public/index.html');
+
+  mainWindow.openDevTools();
+
+  mainWindow.on('closed', function() {
+    mainWindow = null;
+  });
+});

npm-debug.log

@@ -0,0 +1,24 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/bin/node',
+1 verbose cli   '/usr/bin/npm',
+1 verbose cli   'install',
+1 verbose cli   'simplify-js',
+1 verbose cli   '--save' ]
+2 info using npm@1.4.28
+3 info using node@v0.10.40
+4 error Failed to parse json
+4 error Unexpected token }
+5 error File: /workspaces/electron/electron-react-tutorial/package.json
+6 error Failed to parse package.json data.
+6 error package.json must be actual JSON, not just JavaScript.
+6 error
+6 error This is not a bug in npm.
+6 error Tell the package author to fix their package.json file. JSON.parse
+7 error System Linux 3.10.0-229.20.1.el7.x86_64
+8 error command "/usr/bin/node" "/usr/bin/npm" "install" "simplify-js" "--save"
+9 error cwd /workspaces/electron/electron-react-tutorial
+10 error node -v v0.10.40
+11 error npm -v 1.4.28
+12 error file /workspaces/electron/electron-react-tutorial/package.json
+13 error code EJSONPARSE
+14 verbose exit [ 1, true ]

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "my-electron-app",
+  "version": "0.1.0",
+  "main": "main.js",
+  "devDependencies": {
+    "babel": "^5.6.10",
+    "babel-core": "^5.6.11",
+    "babel-loader": "^5.2.2",
+    "babelify": "^7.2.0",
+    "browserify": "^12.0.1",
+    "css-loader": "^0.15.1",
+    "electron-packager": "^4.1.3",
+    "electron-rebuild": "^0.2.2",
+    "gulp": "^3.9.0",
+    "less": "^2.5.1",
+    "less-loader": "^2.2.0",
+    "node-libs-browser": "^0.5.2",
+    "style-loader": "^0.12.3",
+    "vinyl-source-stream": "^1.1.0",
+    "webpack": "^1.9.12",
+    "webpack-dev-server": "^1.9.0"
+  },
+  "scripts": {
+    "watch": "./node_modules/.bin/webpack-dev-server",
+    "rebuild": "./node_modules/.bin/electron-rebuild"
+  },
+  "dependencies": {
+    "d3": "^3.5.9",
+    "electron-prebuilt": "^0.28.3",
+    "react": "^0.13.3",
+    "simplify-js": "^1.2.1"
+  }
+}

public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF8">
+    <title>My Electron-React app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script src="http://localhost:8080/webpack-dev-server.js"></script>
+  <script src="http://localhost:8080/built/bundle.js"></script>
+</html>

webpack.config.js

@@ -0,0 +1,30 @@
+var webpack = require('webpack');
+
+module.exports = {
+  entry: {
+    app: ['webpack/hot/dev-server', './js/Drawpad.js', './js/app.js', './js/DrawpadView.js']
+  },
+
+  output: {
+    path: './public/built',
+    filename: 'bundle.js',
+    publicPath: 'http://localhost:8080/built/'
+  },
+
+  devServer: {
+    contentBase: './public',
+    publicPath: 'http://localhost:8080/built/'
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
+      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}
+    ]
+  },
+
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ]
+}