"init"

ElemeFE · Aug 8, 2016 · 0b461bc · 0b461bc
commit 0b461bc
Show file tree

Hide file tree

Showing 10 changed files with 340 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+    "extends": "airbnb",
+    "plugins": [
+        "react"
+    ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/index.html b/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,20 @@
+import createCanvas from './src/main.js';
+import 'normalize.css';
+import './src/css/main.scss';
+
+const options = {
+  onLeft: () => {
+    alert('left');
+  },
+  onRight: () => {
+    alert('right');
+  },
+  onUp: () => {
+    alert('up');
+  },
+  onDown: () => {
+    alert('down');
+  },
+};
+
+createCanvas(options);
diff --git a/package.json b/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "supergesture",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "node server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "antd": "^1.6.4",
+    "autobind": "^1.0.3",
+    "autoprefixer": "^6.3.7",
+    "babel": "^6.5.2",
+    "babel-core": "^6.10.4",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-antd": "^0.4.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-runtime": "^6.9.2",
+    "clean-webpack-plugin": "^0.1.9",
+    "comment-core-library": "^0.9.2",
+    "common.css": "^1.0.1",
+    "css-loader": "^0.23.1",
+    "electron": "^0.4.1",
+    "electron-packager": "^7.3.0",
+    "eslint": "^2.13.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.11.0",
+    "eslint-plugin-jsx-a11y": "^1.5.5",
+    "eslint-plugin-react": "^5.2.2",
+    "express": "^4.14.0",
+    "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.22.0",
+    "isomorphic-style-loader": "^1.0.0",
+    "node-sass": "^3.8.0",
+    "normalize.css": "^4.2.0",
+    "postcss-loader": "^0.9.1",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "react-redux": "^4.4.5",
+    "react-router": "^2.5.2",
+    "react-router-redux": "^4.0.5",
+    "redux": "^3.5.2",
+    "redux-devtools": "^3.3.1",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.11",
+    "redux-router": "^2.0.0",
+    "redux-saga": "^0.11.0",
+    "sass-loader": "^4.0.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "video.js": "^5.10.4",
+    "webpack": "^1.13.1",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.12.1"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,33 @@
+const express = require('express');
+const webpack = require('webpack');
+const config = require('./webpack.dev.config.js');
+const compiler = webpack(config);
+const path = require('path');
+
+const app = express();
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  publicPath: config.output.publicPath,
+  stats: {
+    colors: true,
+    chunks: false,
+  },
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.use(express.static(config.output.path));
+
+app.get('*', (req, res) => {
+  res.sendFile(path.resolve(__dirname, 'index.html'));
+});
+
+const server = app.listen(8000, (err) => {
+  if (err) {
+    console.log(err);
+    return false;
+  }
+  const port = server.address().port;
+  console.log(`Listening at http://localhost:${port}`);
+  return true;
+});
diff --git a/src/css/main.scss b/src/css/main.scss
@@ -0,0 +1,4 @@
+html,
+body {
+  height: 100%;
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,66 @@
+const emptyFunc = () => {};
+class Canvas {
+  constructor(options = {}) {
+    this.path = null;
+    this.startPos = null;
+    this.endPos = null;
+    this.direction = null;
+    this.points = [];
+    this.isMove = false;
+    this.onLeft = options.onLeft || emptyFunc;
+    this.onRight = options.onRight || emptyFunc;
+    this.onUp = options.onUp || emptyFunc;
+    this.onDown = options.onDown || emptyFunc;
+    this.path = document.getElementById('path');
+
+    window.addEventListener('contextmenu', () => {
+      event.preventDefault();
+      this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      this.path.id = 'path';
+      this.svg.setAttribute('width', '100%');
+      this.svg.setAttribute('height', '100%');
+      this.svg.setAttribute('stroke', '#000');
+      this.svg.setAttribute('fill', 'none');
+      this.svg.appendChild(this.path);
+      document.body.appendChild(this.svg);
+
+      this.points = [];
+      this.startPos = {
+        x: event.pageX,
+        y: event.pageY,
+      };
+      this.path.setAttribute('d', `M ${event.pageX} ${event.pageY}`);
+      this.isMove = true;
+    });
+
+    window.addEventListener('mousemove', this.move.bind(this));
+
+    window.addEventListener('mouseup', () => {
+      // console.log(this.points);
+      if (Math.abs(this.endPos.x - this.startPos.x) > Math.abs(this.endPos.y - this.startPos.y)) {
+        this.direction = this.endPos.x - this.startPos.x > 0 ? 'Right' : 'Left';
+      } else {
+        this.direction = this.endPos.y - this.startPos.y > 0 ? 'Down' : 'Up';
+      }
+      this[`on${this.direction}`]();
+      document.body.removeChild(this.svg);
+      this.isMove = false;
+    });
+  }
+
+  move() {
+    if (!this.isMove) return;
+    this.endPos = {
+      x: event.pageX,
+      y: event.pageY,
+    };
+    const d = this.path.getAttribute('d');
+    this.points.push({ x: event.pageX, y: event.pageY });
+    this.path.setAttribute('d', `${d} L ${event.pageX} ${event.pageY}`);
+  }
+}
+
+const createCanvas = (options) => new Canvas(options);
+
+export default createCanvas;
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -0,0 +1,62 @@
+const path = require('path');
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: {
+    index: [path.resolve(__dirname, './index.js'), 'webpack-hot-middleware/client?reload=true'],
+  },
+
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    filename: '[name].js',
+    publicPath: '/',
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: {
+          plugins: ['transform-runtime', 'transform-decorators-legacy', ['antd']],
+          presets: ['es2015', 'stage-0', 'react'],
+        },
+      },
+      {
+        test: /\.(scss|css)$/,
+        loader: 'style-loader!css-loader!postcss-loader!sass-loader',
+      },
+      {
+        test: /\.(jpg|png|svg|gif|eot|ttf|woff)$/,
+        loader: 'url-loader?limit=8000!file-loader',
+      },
+    ],
+  },
+
+  postcss() {
+    return [autoprefixer];
+  },
+
+  status: {
+    color: true,
+  },
+
+  devtool: 'source-map',
+
+  plugins: [
+    // Webpack 1.0
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+    }),
+  ],
+};
diff --git a/webpack.pro.config.js b/webpack.pro.config.js
@@ -0,0 +1,75 @@
+const path = require('path');
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+module.exports = {
+  entry: {
+    index: path.resolve(__dirname, './index.js'),
+  },
+
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    filename: '[name].js',
+    publicPath: '/',
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: {
+          plugins: ['transform-runtime', 'transform-decorators-legacy', ['antd']],
+          presets: ['es2015', 'stage-0', 'react'],
+        },
+      },
+      {
+        test: /\.(scss|css)$/,
+        loader: 'style-loader!css-loader!postcss-loader!sass-loader',
+      },
+      {
+        test: /\.(jpg|png|svg|gif|eot|ttf|woff)$/,
+        loader: 'url-loader?limit=8000!file-loader',
+      },
+    ],
+  },
+
+  postcss() {
+    return [autoprefixer];
+  },
+
+  status: {
+    color: true,
+  },
+
+  devtool: 'source-map',
+
+  plugins: [
+    // Webpack 1.0
+    // new webpack.optimize.OccurenceOrderPlugin(),
+    // new webpack.HotModuleReplacementPlugin(),
+    // new webpack.NoErrorsPlugin(),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: './dist/index.html',
+      inject: true,
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+      },
+    }),
+    new CleanWebpackPlugin(['./dist'], {
+      root: __dirname,
+      verbose: true,
+      dry: false,
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+    new webpack.optimize.CommonsChunkPlugin('common.js'),
+  ],
+};