Start convas component

package-lock.json

@@ -4610,6 +4610,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -5572,6 +5580,41 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-1.0.0.tgz",
+      "integrity": "sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==",
+      "requires": {
+        "core-js": "^2.4.1",
+        "fbjs-css-vars": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
+    "fbjs-css-vars": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6892,6 +6935,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -8817,6 +8869,15 @@
         "tslib": "^1.10.0"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -9310,6 +9371,11 @@
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
+    "paper": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/paper/-/paper-0.12.4.tgz",
+      "integrity": "sha512-KypUqX2uXJZOX2j55RcgnBzK7weau9WKVCB+3e0E1Wa9yxlV7z6BsSrrJxmLNIC0pATbjcy9pJYDutQ7rIhnpQ=="
+    },
     "parallel-transform": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
@@ -10973,6 +11039,35 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-paper-bindings": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-paper-bindings/-/react-paper-bindings-2.0.0.tgz",
+      "integrity": "sha512-hq0yUm8NTE7qBnYyDRfavPlmsx5gKd3Xq7agtSxNE5vuUKrMJUubpkkzDUk43geOy3RKRFvYdJ5PVTJOGUggOA==",
+      "requires": {
+        "fbjs": "^1.0.0",
+        "paper": "^0.11.8",
+        "react": "^16.6.0",
+        "react-dom": "^16.6.0",
+        "react-reconciler": "^0.16.0",
+        "scheduler": "^0.10.0"
+      },
+      "dependencies": {
+        "paper": {
+          "version": "0.11.8",
+          "resolved": "https://registry.npmjs.org/paper/-/paper-0.11.8.tgz",
+          "integrity": "sha512-3O5o8SntwieIlBmHjWS4hAYESiZ0yb++Outz9Rr5AN/ZFK7jfVGLANjqyIvEKIpGMImf2fQCkW64n8dkYheP5g=="
+        },
+        "scheduler": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.10.0.tgz",
+          "integrity": "sha512-+TSTVTCBAA3h8Anei3haDc1IRwMeDmtI/y/o3iBe3Mjl2vwYF9DtPDt929HyRmV/e7au7CLu8sc4C4W0VOs29w==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "react-popper": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
@@ -10987,6 +11082,28 @@
         "warning": "^4.0.2"
       }
     },
+    "react-reconciler": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.16.0.tgz",
+      "integrity": "sha512-0rpdmwTQwcwMAOmQkHSW1LzM5tBjWBpm/a7QgjpbrbHfo0fHeMTogC4wC/z2UjfKsdVp0F8zSaxckoylbHd6Rw==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.10.0"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.10.0.tgz",
+          "integrity": "sha512-+TSTVTCBAA3h8Anei3haDc1IRwMeDmtI/y/o3iBe3Mjl2vwYF9DtPDt929HyRmV/e7au7CLu8sc4C4W0VOs29w==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "react-scripts": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.0.tgz",
@@ -12939,6 +13056,11 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
       "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w=="
     },
+    "ua-parser-js": {
+      "version": "0.7.21",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
+      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

package.json

@@ -12,8 +12,10 @@
     "@types/react-dom": "^16.9.5",
     "@types/reactstrap": "^8.4.2",
     "bootstrap": "^4.4.1",
+    "paper": "^0.12.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-paper-bindings": "^2.0.0",
     "react-scripts": "3.4.0",
     "reactstrap": "^8.4.1",
     "typescript": "^3.8.3"

src/App.css

@@ -36,3 +36,13 @@
     transform: rotate(360deg);
   }
 }
+
+#magic-canvas {
+  width: 100%;
+  height: 80vh;
+  background-color: #F2F2F2;
+  background-image: url('merseyside-nobg.png');
+  background-position: center center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}

src/App.tsx

@@ -3,6 +3,7 @@ import './App.css';
 import 'bootstrap/dist/css/bootstrap.css';
 
 import PersonalInformation, { FormData } from './PersonalInformation';
+import DrawCanvas from './DrawCanvas';
 
 type SectionComponentProps = {
   changePage: () => void
@@ -46,7 +47,7 @@ type AnswersData = {
 };
 
 const App = () => {
-  const [ currentPage, setCurrentPage ] = useState(0);
+  const [ currentPage, setCurrentPage ] = useState(3);
   const [ answers, saveAnswers ] = useState<AnswersData>({
     personalInformation: {
       age: '',
@@ -77,6 +78,7 @@ const App = () => {
         })
       }
     }),
+    DrawCanvas({})
   ];
   return (
     <div className="App bg-light">

src/DrawCanvas.tsx

@@ -0,0 +1,110 @@
+
+import React, { useEffect, useState } from 'react';
+import Paper, { Path, Tool } from 'paper';
+
+const COLORS = [
+  '#FFC6BC',
+  '#FEDEA2',
+  '#FFF9B8',
+  '#D3DBB2',
+  '#A7D3D2',
+  '#EFE3F3',
+  '#C4D0F5',
+  '#FFC6BC',
+];
+
+const mkBgColor = (color: string) => {
+  const _color = new Paper.Color(color);
+  _color.alpha = 0.5;
+  return _color;
+};
+
+const mkPath = (color: string) => {
+  let style = {
+    strokeColor: color,
+    strokeWidth: 5,
+    fillColor: mkBgColor(color)
+  }
+  return new Path(style);
+}
+
+type CanvasProps = {
+  log: (data: string) => void,
+  maxDrawingsReached: () => void
+};
+
+type CanvasState = {
+  data: {
+    form: any,
+    path: paper.Path
+  }[],
+  current: number
+};
+
+class Canvas2 extends React.Component<any, CanvasState> {
+  current = 0;
+  Paths: paper.Path[];
+
+  constructor(props: any){
+    super(props);
+    this.Paths = [];
+    this.state = {
+      data: [],
+      current: 0,
+    }
+  }
+
+  addPoint = (event: any) => {
+    const { data, current } = this.state;
+    data[current].path.add(event.point)
+  }
+
+  closePath = (event: any) => {
+    const { data, current } = this.state;
+    data[current].path.add(data[current].path.firstSegment);
+    data[current].path.closed = true;
+    data[current].path.simplify();
+  }
+
+  componentDidMount = () => {
+    Paper.setup('magic-canvas');
+    let Tool = new Paper.Tool();
+    Tool.onMouseDown = this.addPoint; 
+    Tool.onMouseDrag = this.addPoint;
+    Tool.onMouseUp = (event: any) => {
+      this.closePath(event);
+
+      if (this.state.current < 7) {
+        this.setState(({ current }) => ({
+          current: current + 1
+        }))
+      } else {
+        Tool.remove();
+      }
+    }
+    this.setState({
+      data: COLORS.map(color => ({
+        form: {},
+        path: mkPath(color)
+      }))
+    })
+  }
+  render = () => {
+    return (
+      <canvas id="magic-canvas" />
+    )
+  }
+}
+
+
+export const DrawCanvas: React.FunctionComponent = () => {
+  const log = (data: string) => console.log(data);
+  return (
+    <section id="draw-canvas">
+      <h2>Draw time</h2>
+      <Canvas2></Canvas2>
+    </section>
+  )
+};
+
+export default DrawCanvas;

src/react-app-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="react-scripts" />
+declare module 'react-paper-bindings';