Added twojs and basic map drawing

package.json

@@ -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": {

src/components/Map.js

@@ -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 ProxyToken from "./ProxyToken";
-import AddMapButton from "../components/AddMapButton";
+import AddMapButton from "./AddMapButton";
-import TokenMenu from "../components/TokenMenu";
+import TokenMenu from "./TokenMenu";
-import MapToken from "../components/MapToken";
+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) => ({
+            // setMapTranslate((previousMapTranslate) => ({
-              x: previousMapTranslate.x + event.dx,
+            //   x: previousMapTranslate.x + event.dx,
-              y: previousMapTranslate.y + event.dy,
+            //   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}

src/components/MapDrawing.js

@@ -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;

yarn.lock

@@ -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"