Keep map aspect ratio through canvas sizes

src/Admin.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Container, Badge, FormGroup, Label, Input, Button, Collapse } from 'reactstrap';
 import Paper, { Path, PaperScope, Group, Color } from 'paper';
-import { equals, without, append, isNil, identity, Filter, includes } from 'ramda';
+import { equals, without, append, isNil, identity, includes } from 'ramda';
 import Axios from 'axios';
 import VALUES, { AgeVal, GenderVal, EthnicityVal, NonNativeVal, Filters, FilterVal, FilterStatus } from './services';
 
@@ -112,6 +112,7 @@ class Admin extends React.Component<{}, AdminState> {
   mkPathGroup = (data: OriginalCanvasData[], index: number) => {
     const _data = data.reduce<(paper.Path|paper.Item)[]>((group, value) => {
       const _path = mkPath(value.path, index);
+      // _path.scale((1/1076)*(905), (1/748)*(748));
       const _text = mkPathLabel(value.form.name, _path);
       return [
         ...group,
@@ -126,7 +127,7 @@ class Admin extends React.Component<{}, AdminState> {
   componentDidMount = () => {
     const canvas = new PaperScope();
     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) => {
         return {

src/App.css

@@ -27,6 +27,12 @@
   padding: 2rem;
 }
 
+@media only screen and (max-width : 500px) { 
+  .App .container {
+    padding: 0.5rem!important;
+  }
+}
+
 .App section {
   display: flex;
   flex-direction: column;
@@ -68,10 +74,9 @@ form button {
 #magic-canvas,
 #vom-admin-canvas {
   width: 100%;
-  height: 80vh;
   background-color: #F2F2F2;
-  background-image: url('merseyside-nobg.png');
-  background-position: center center;
+  background-image: url('merseyside-nobg-4_5-LABELED.png');
+  background-position: top left;
   background-size: contain;
   background-repeat: no-repeat;
 }

src/DrawCanvas.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState, useEffect } from 'react';
-import Paper, { Path } from 'paper';
+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';
@@ -392,7 +392,9 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
   }
 
   componentDidMount = () => {
-    Paper.setup('magic-canvas');
+    const canvas = new PaperScope();
+    canvas.setup('magic-canvas');
+    canvas.view.viewSize.height = canvas.view.size.width * 1.25;
     this.setState({
       drawTool: this.mkDrawTool(),
       editTool: this.mkEditTool(),