Fix path normalization

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+backend/virtualenv

src/Admin.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Container, Badge, FormGroup, Label, Input, Button, Collapse } from 'reactstrap';
-import Paper, { Path, PaperScope, Group, Color } from 'paper';
+import Paper, { Path, PaperScope, Point, Group, Color } from 'paper';
 import { equals, without, append, isNil, identity, includes } from 'ramda';
 import Axios from 'axios';
 import VALUES, { AgeVal, GenderVal, EthnicityVal, NonNativeVal, Filters, FilterVal, FilterStatus } from './services';
@@ -17,6 +17,10 @@ type Result = {
     nonNative: NonNativeVal
   },
   canvas: OriginalCanvasData[],
+  canvasSize: {
+    width: number,
+    height: number
+  },
   email: string
 }
 
@@ -109,9 +113,10 @@ class Admin extends React.Component<{}, AdminState> {
     };
   }
 
-  mkPathGroup = (data: OriginalCanvasData[], index: number, canvas: paper.PaperScope) => {
+  mkPathGroup = (data: OriginalCanvasData[], index: number, canvas: paper.PaperScope, originalCanvas: { width: number, height: number}) => {
     const _data = data.reduce<(paper.Path|paper.Item)[]>((group, value) => {
       const _path = mkPath(value.path, index);
+      _path.scale(canvas.view.viewSize.width / originalCanvas.width, new Point(0, 0));
       const _text = mkPathLabel(value.form.name, _path);
       return [
         ...group,
@@ -128,11 +133,11 @@ class Admin extends React.Component<{}, AdminState> {
     canvas.setup('vom-admin-canvas');
     canvas.view.viewSize.height = canvas.view.size.width * 1.25;
     Axios.get<Result[]>('https://voicesofmerseyside.inama.dev/backend/').then(response => {
-    const _data = response.data.map((result, index) => {
+      const _data = response.data.map((result, index) => {
         return {
           ...result,
           canvas: undefined,
-          group: this.mkPathGroup(result.canvas, index, canvas)
+          group: this.mkPathGroup(result.canvas, index, canvas, result.canvasSize),
         };
       })
       this.setState({

src/App.tsx

@@ -53,6 +53,10 @@ const FinishSection: React.FunctionComponent = () => {
 type AnswersData = {
   personalInformation: FormData,
   canvas: CanvasData[],
+  canvasSize: {
+    width: number,
+    height: number,
+  },
   email: string,
 };
 
@@ -72,6 +76,10 @@ const App = () => {
       nonNative: '',
     },
     canvas: [],
+    canvasSize: {
+      width: 0,
+      height: 0
+    },
     email: ''
   });
   const changePage = () => {
@@ -85,6 +93,7 @@ const App = () => {
         form: data.form,
         path: data.path.exportJSON()
       })),
+      canvasSize: answers.canvasSize,
       email: answers.email
     };
     const postRequest = new XMLHttpRequest();
@@ -113,7 +122,8 @@ const App = () => {
       saveData: (data) => {
         saveAnswers({
           ...answers,
-          canvas: data
+          canvas: data.data,
+          canvasSize: data.canvas
         });
         changePage()
       }

src/DrawCanvas.tsx

@@ -74,7 +74,13 @@ type CanvasState = {
 };
 
 type CanvasProps = {
-  saveData: (data: CanvasData[] | any) => void,
+  saveData: (data: {
+    data: CanvasData[],
+    canvas: {
+      width: number,
+      height: number
+    }
+  }) => void,
   showHelp: () => void,
 };
 
@@ -464,7 +470,10 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
         <Button
           color="primary"
           onClick={() => {
-            this.props.saveData(this.state.data)
+            this.props.saveData({
+              data: this.state.data,
+              canvas: this.state.canvas
+            })
           }}
           disabled={this.state.current === 0}
         >Finished</Button>
@@ -482,7 +491,10 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
           </ModalBody>
           <ModalFooter>
             <Button onClick={() => this.toggleEditMode(true)} color="success" outline>Edit drawings</Button>
-            <Button onClick={() => this.props.saveData(this.state.data)} color="primary">Finished</Button>
+            <Button onClick={() => this.props.saveData({
+              data: this.state.data,
+              canvas: this.state.canvas
+            })} color="primary">Finished</Button>
           </ModalFooter>
         </Modal>
       </>
@@ -493,7 +505,13 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
 
 
 export const DrawCanvas: React.FunctionComponent<{
-  saveData: (data: CanvasData[]) => void
+  saveData: (data: {
+    data: CanvasData[],
+    canvas: {
+      width: number,
+      height: number
+    }
+  }) => void
 }> = ({ saveData }) => {
   const [showInstructions, setShowInstructions] = useState(true)
   return (