Normalize paths when drawing and apply respecting scale on Admin page

src/Admin.tsx

@@ -109,10 +109,10 @@ class Admin extends React.Component<{}, AdminState> {
     };
   }
 
-  mkPathGroup = (data: OriginalCanvasData[], index: number) => {
+  mkPathGroup = (data: OriginalCanvasData[], index: number, canvas: paper.PaperScope) => {
     const _data = data.reduce<(paper.Path|paper.Item)[]>((group, value) => {
       const _path = mkPath(value.path, index);
-      // _path.scale((1/1076)*(905), (1/748)*(748));
+      _path.scale(canvas.view.size.width, canvas.view.size.height)
       const _text = mkPathLabel(value.form.name, _path);
       return [
         ...group,
@@ -133,7 +133,7 @@ class Admin extends React.Component<{}, AdminState> {
         return {
           ...result,
           canvas: undefined,
-          group: this.mkPathGroup(result.canvas, index)
+          group: this.mkPathGroup(result.canvas, index, canvas)
         };
       })
       this.setState({

src/DrawCanvas.tsx

@@ -4,7 +4,7 @@ import Paper, { Path, PaperScope } from 'paper';
 import { Modal, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input, Fade, ModalHeader, ButtonGroup, Badge, FormFeedback } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { remove, update, difference } from 'ramda';
+import { remove, update, difference, path } from 'ramda';
 
 const COLORS = [
   '#ffc6bc',
@@ -59,6 +59,10 @@ export type CanvasData = {
 };
 
 type CanvasState = {
+  canvas: {
+    height: number,
+    width: number
+  },
   data: CanvasData[],
   current: number,
   openModal: boolean,
@@ -70,7 +74,7 @@ type CanvasState = {
 };
 
 type CanvasProps = {
-  saveData: (data: CanvasData[]) => void,
+  saveData: (data: CanvasData[] | any) => void,
   showHelp: () => void,
 };
 
@@ -194,7 +198,11 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
       editTool: undefined,
       pathSelected: undefined,
       _path: undefined,
-      editMode: false
+      editMode: false,
+      canvas: {
+        height: 0,
+        width: 0
+      }
     }
   }
 
@@ -398,6 +406,10 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
     this.setState({
       drawTool: this.mkDrawTool(),
       editTool: this.mkEditTool(),
+      canvas: {
+        height: canvas.view.size.height,
+        width: canvas.view.size.width
+      }
     })
   }
 
@@ -451,7 +463,17 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
         <canvas id="magic-canvas" className='mb-4 rounded'/>
         <Button
           color="primary"
-          onClick={() => this.props.saveData(this.state.data)}
+          onClick={() => {
+            const _data = this.state.data.map(item => {
+              const _path = item.path.clone({insert: false});
+              _path.scale(1/this.state.canvas.width, 1/this.state.canvas.height);
+              return {
+                ...item,
+                path: _path
+              }
+            });
+            this.props.saveData(_data)
+          }}
           disabled={this.state.current === 0}
         >Finished</Button>
         <Modal isOpen={this.state.openModal}>