From 4e558380e75a51c8c299152e6a1be5eba85e4d92 Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Mon, 17 Jul 2017 12:04:12 -0400
Subject: [PATCH] add paper canvas component

---
 .eslintignore                   |  2 +-
 package.json                    |  1 +
 src/components/paint-editor.jsx |  5 ++---
 src/components/paper-canvas.jsx | 36 +++++++++++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/components/paper-canvas.jsx

diff --git a/.eslintignore b/.eslintignore
index 03380294..0cbd4879 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,3 @@
 node_modules/*
-build/*
+dist/*
 playground/
\ No newline at end of file
diff --git a/package.json b/package.json
index be5f585d..c8d81796 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "lodash.defaultsdeep": "4.6.0",
     "minilog": "3.1.0",
     "mkdirp": "^0.5.1",
+    "paper": "^0.11.4",
     "postcss-import": "^10.0.0",
     "postcss-loader": "^2.0.5",
     "postcss-simple-vars": "^4.0.0",
diff --git a/src/components/paint-editor.jsx b/src/components/paint-editor.jsx
index 0ca019f9..16a9c877 100644
--- a/src/components/paint-editor.jsx
+++ b/src/components/paint-editor.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
+import PaperCanvas from './paper-canvas.jsx';
 
 export default class PaintEditorComponent extends React.Component {
     render () {
         return (
-            <div className="paint-editor">
-                BANANAS
-            </div>
+            <PaperCanvas />
         );
     }
 }
diff --git a/src/components/paper-canvas.jsx b/src/components/paper-canvas.jsx
new file mode 100644
index 00000000..398da80b
--- /dev/null
+++ b/src/components/paper-canvas.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import paper from 'paper';
+
+class PaperCanvas extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+        };
+    }
+    componentDidMount () {
+        paper.setup('paper-canvas');
+        // Create a Paper.js Path to draw a line into it:
+        var path = new paper.Path();
+        // Give the stroke a color
+        path.strokeColor = 'black';
+        var start = new paper.Point(100, 100);
+        // Move to start and draw a line from there
+        path.moveTo(start);
+        // Note that the plus operator on Point objects does not work
+        // in JavaScript. Instead, we need to call the add() function:
+        path.lineTo(start.add([200, -50]));
+        // Draw the view now:
+        paper.view.draw();
+    }
+    componentWillUnmount () {
+    }
+    render () {
+        return (
+            <canvas id="paper-canvas" />
+        );
+    }
+}
+
+PaperCanvas.propTypes = {};
+
+module.exports = PaperCanvas;