From f6b691bbd40d4e9e12ce4b1e9a32f968a01bf7e5 Mon Sep 17 00:00:00 2001 From: sander Date: Fri, 20 Nov 2015 16:51:56 -0500 Subject: [PATCH] initial upload --- .gitignore | 1 + README.md | 6 +++++ js/Drawpad.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++ js/DrawpadView.js | 36 ++++++++++++++++++++++++++++ js/Line.js | 14 +++++++++++ js/Point.js | 14 +++++++++++ js/app.js | 4 ++++ jsconfig.json | 7 ++++++ less/main.less | 13 ++++++++++ main.js | 22 +++++++++++++++++ npm-debug.log | 24 +++++++++++++++++++ package.json | 33 ++++++++++++++++++++++++++ public/index.html | 12 ++++++++++ webpack.config.js | 30 ++++++++++++++++++++++++ 14 files changed, 276 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 js/Drawpad.js create mode 100644 js/DrawpadView.js create mode 100644 js/Line.js create mode 100644 js/Point.js create mode 100644 js/app.js create mode 100644 jsconfig.json create mode 100644 less/main.less create mode 100644 main.js create mode 100644 npm-debug.log create mode 100644 package.json create mode 100644 public/index.html create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..321d2d6 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +Drawpad + +Setup for dev: +* npm install +* npm run watch +* electron . \ No newline at end of file diff --git a/js/Drawpad.js b/js/Drawpad.js new file mode 100644 index 0000000..0ed137c --- /dev/null +++ b/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 \ No newline at end of file diff --git a/js/DrawpadView.js b/js/DrawpadView.js new file mode 100644 index 0000000..6019a67 --- /dev/null +++ b/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 ; + } + +} + + +export default DrawpadView \ No newline at end of file diff --git a/js/Line.js b/js/Line.js new file mode 100644 index 0000000..7172fea --- /dev/null +++ b/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; \ No newline at end of file diff --git a/js/Point.js b/js/Point.js new file mode 100644 index 0000000..a39fd47 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..8e89130 --- /dev/null +++ b/js/app.js @@ -0,0 +1,4 @@ +import React from 'react'; +import DrawpadView from './DrawpadView'; + +React.render(, document.getElementById('app')); diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..3b1b457 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "target": "ES6", + "module": "commonjs", + "experimentalDecorators": true + } +} \ No newline at end of file diff --git a/less/main.less b/less/main.less new file mode 100644 index 0000000..3b97083 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..bc55de7 --- /dev/null +++ b/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; + }); +}); diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 0000000..44f3984 --- /dev/null +++ b/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 ] diff --git a/package.json b/package.json new file mode 100644 index 0000000..7dc0c4f --- /dev/null +++ b/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" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..35e52b8 --- /dev/null +++ b/public/index.html @@ -0,0 +1,12 @@ + + + + + My Electron-React app + + +
+ + + + diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..2deb5e9 --- /dev/null +++ b/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() + ] +}