diff --git a/package.json b/package.json index 5ad9479..02476c6 100644 --- a/package.json +++ b/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" diff --git a/src/components/MapDrawing.js b/src/components/MapDrawing.js index bab7ec7..190d16e 100644 --- a/src/components/MapDrawing.js +++ b/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(); diff --git a/yarn.lock b/yarn.lock index 39e614d..7e76172 100644 --- a/yarn.lock +++ b/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"