Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added point simplification with simplify-js

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-18 19:09:48 +10:00
parent f472f03616
commit ecaf82fd53
3 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

13
src/components/MapDrawing.js
View File

@ -1,4 +1,5 @@
import React, { useRef, useEffect, useState } from "react"; import React, { useRef, useEffect, useState } from "react";
import simplify from "simplify-js";
function MapDrawing({ width, height }) { function MapDrawing({ width, height }) {
const canvasRef = useRef(); const canvasRef = useRef();
@ -12,7 +13,7 @@ function MapDrawing({ width, height }) {
const containerRect = container.getBoundingClientRect(); const containerRect = container.getBoundingClientRect();
const x = (event.clientX - containerRect.x) / containerRect.width; const x = (event.clientX - containerRect.x) / containerRect.width;
const y = (event.clientY - containerRect.y) / containerRect.height; 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) { function handleMouseUp(event) {
setIsMouseDown(false); 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(() => { useEffect(() => {
@ -46,9 +53,9 @@ function MapDrawing({ width, height }) {
context.clearRect(0, 0, width, height); context.clearRect(0, 0, width, height);
for (let shape of shapes) { for (let shape of shapes) {
context.beginPath(); 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)) { 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.closePath();
context.stroke(); context.stroke();

5
yarn.lock
View File

@ -9963,6 +9963,11 @@ simplebar@^5.1.0:
lodash.throttle "^4.1.1" lodash.throttle "^4.1.1"
resize-observer-polyfill "^1.5.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: sisteransi@^1.0.3:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.4.tgz#386713f1ef688c7c0304dc4c0632898941cad2e3" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.4.tgz#386713f1ef688c7c0304dc4c0632898941cad2e3"