Added point simplification with simplify-js

package.json

@@ -20,6 +20,7 @@
     "shortid": "^2.2.15",
     "simple-peer": "^9.6.2",
     "simplebar-react": "^2.1.0",
+    "simplify-js": "^1.2.4",
     "socket.io-client": "^2.3.0",
     "theme-ui": "^0.3.1",
     "webrtc-adapter": "^7.5.1"

src/components/MapDrawing.js

@@ -1,4 +1,5 @@
 import React, { useRef, useEffect, useState } from "react";
+import simplify from "simplify-js";
 
 function MapDrawing({ width, height }) {
   const canvasRef = useRef();
@@ -12,7 +13,7 @@ function MapDrawing({ width, height }) {
       const containerRect = container.getBoundingClientRect();
       const x = (event.clientX - containerRect.x) / containerRect.width;
       const y = (event.clientY - containerRect.y) / containerRect.height;
-      return { x: x * width, y: y * height };
+      return { x, y };
     }
   }
 
@@ -36,6 +37,12 @@ function MapDrawing({ width, height }) {
 
   function handleMouseUp(event) {
     setIsMouseDown(false);
+    setShapes((prevShapes) => {
+      const currentShape = prevShapes.slice(-1)[0];
+      const otherShapes = prevShapes.slice(0, -1);
+      const simplified = simplify(currentShape.points, 0.001);
+      return [...otherShapes, { points: simplified }];
+    });
   }
 
   useEffect(() => {
@@ -46,9 +53,9 @@ function MapDrawing({ width, height }) {
       context.clearRect(0, 0, width, height);
       for (let shape of shapes) {
         context.beginPath();
-        context.moveTo(shape.points[0].x, shape.points[0].y);
+        context.moveTo(shape.points[0].x * width, shape.points[0].y * height);
         for (let point of shape.points.slice(1)) {
-          context.lineTo(point.x, point.y);
+          context.lineTo(point.x * width, point.y * height);
         }
         context.closePath();
         context.stroke();

yarn.lock

@@ -9963,6 +9963,11 @@ simplebar@^5.1.0:
     lodash.throttle "^4.1.1"
     resize-observer-polyfill "^1.5.1"
 
+simplify-js@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/simplify-js/-/simplify-js-1.2.4.tgz#7aab22d6df547ffd40ef0761ccd82b75287d45c7"
+  integrity sha512-vITfSlwt7h/oyrU42R83mtzFpwYk3+mkH9bOHqq/Qw6n8rtR7aE3NZQ5fbcyCUVVmuMJR6ynsAhOfK2qoah8Jg==
+
 sisteransi@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.4.tgz#386713f1ef688c7c0304dc4c0632898941cad2e3"