Added twojs and basic map drawing
This commit is contained in:
parent
393656eb89
commit
e2daf1a595
@ -22,6 +22,7 @@
|
||||
"simplebar-react": "^2.1.0",
|
||||
"socket.io-client": "^2.3.0",
|
||||
"theme-ui": "^0.3.1",
|
||||
"two.js": "^0.7.0-stable.1",
|
||||
"webrtc-adapter": "^7.5.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
@ -2,10 +2,11 @@ import React, { useRef, useEffect, useState } from "react";
|
||||
import { Box, Image } from "theme-ui";
|
||||
import interact from "interactjs";
|
||||
|
||||
import ProxyToken from "../components/ProxyToken";
|
||||
import AddMapButton from "../components/AddMapButton";
|
||||
import TokenMenu from "../components/TokenMenu";
|
||||
import MapToken from "../components/MapToken";
|
||||
import ProxyToken from "./ProxyToken";
|
||||
import AddMapButton from "./AddMapButton";
|
||||
import TokenMenu from "./TokenMenu";
|
||||
import MapToken from "./MapToken";
|
||||
import MapDrawing from "./MapDrawing";
|
||||
|
||||
const mapTokenClassName = "map-token";
|
||||
const zoomSpeed = -0.005;
|
||||
@ -52,10 +53,10 @@ function Map({
|
||||
inertia: true,
|
||||
listeners: {
|
||||
move: (event) => {
|
||||
setMapTranslate((previousMapTranslate) => ({
|
||||
x: previousMapTranslate.x + event.dx,
|
||||
y: previousMapTranslate.y + event.dy,
|
||||
}));
|
||||
// setMapTranslate((previousMapTranslate) => ({
|
||||
// x: previousMapTranslate.x + event.dx,
|
||||
// y: previousMapTranslate.y + event.dy,
|
||||
// }));
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -204,6 +205,10 @@ function Map({
|
||||
/>
|
||||
{mapImage}
|
||||
{mapTokens}
|
||||
<MapDrawing
|
||||
width={mapData ? mapData.width : 0}
|
||||
height={mapData ? mapData.height : 0}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
{mapActions}
|
||||
|
82
src/components/MapDrawing.js
Normal file
82
src/components/MapDrawing.js
Normal file
@ -0,0 +1,82 @@
|
||||
import React, { useRef, useEffect } from "react";
|
||||
import Two from "two.js";
|
||||
|
||||
function MapDrawing({ width, height }) {
|
||||
const twoRef = useRef(new Two({ type: Two.Types.canvas }));
|
||||
const containerRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
const two = twoRef.current;
|
||||
const container = containerRef.current;
|
||||
if (two && container) {
|
||||
two.width = width;
|
||||
two.height = height;
|
||||
two.update();
|
||||
// Force the canvas to be 100% after update
|
||||
const canvas = container.firstChild;
|
||||
if (canvas) {
|
||||
canvas.style.width = "100%";
|
||||
canvas.style.height = "100%";
|
||||
}
|
||||
}
|
||||
}, [width, height]);
|
||||
|
||||
useEffect(() => {
|
||||
const two = twoRef.current;
|
||||
two.appendTo(containerRef.current);
|
||||
}, []);
|
||||
|
||||
function getMousePosition(event) {
|
||||
const container = containerRef.current;
|
||||
if (container) {
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const x = (event.clientX - containerRect.x) / containerRect.width;
|
||||
const y = (event.clientY - containerRect.y) / containerRect.height;
|
||||
let v = new Two.Vector(x * width, y * height);
|
||||
v.position = new Two.Vector().copy(v);
|
||||
return v;
|
||||
}
|
||||
}
|
||||
|
||||
const mouseDownRef = useRef(false);
|
||||
const shapeRef = useRef();
|
||||
function handleMouseDown(event) {
|
||||
const two = twoRef.current;
|
||||
if (two) {
|
||||
mouseDownRef.current = true;
|
||||
let position = getMousePosition(event);
|
||||
let shape = two.makePath([position], false);
|
||||
shape.fill = "#333";
|
||||
shape.stroke = "#333";
|
||||
shape.linewidth = 5;
|
||||
shape.vertices[0].addSelf(shape.translation);
|
||||
shape.translation.clear();
|
||||
shapeRef.current = shape;
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(event) {
|
||||
const shape = shapeRef.current;
|
||||
const two = twoRef.current;
|
||||
if (mouseDownRef.current && shape && two) {
|
||||
shape.vertices.push(getMousePosition(event));
|
||||
two.render();
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseUp(event) {
|
||||
mouseDownRef.current = false;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
|
||||
ref={containerRef}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default MapDrawing;
|
@ -10770,6 +10770,11 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
|
||||
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
|
||||
integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
|
||||
|
||||
two.js@^0.7.0-stable.1:
|
||||
version "0.7.0-stable.1"
|
||||
resolved "https://registry.yarnpkg.com/two.js/-/two.js-0.7.0-stable.1.tgz#4999070a566c3ab1b2ba980134d0d786b46ce2db"
|
||||
integrity sha512-4QULPtstGEyGbhMvVvCGxgm85Un6CMYqFYafw7hNan9LdqoYZqMnxsaj8pkfBT4zpRfqB98aZjGrWYoCBqKtXA==
|
||||
|
||||
type-check@~0.3.2:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
|
||||
|
Loading…
Reference in New Issue
Block a user